i want to make a registration form in which the user should be able to upload the profile picture along with the registration form . I am uploading the picture using ajax like this
$(document).ready(function () {
$('#UploadForm').on('submit', function (e) {
e.preventDefault();
$('#SubmitButton').attr('disabled', ''); // disable upload button
//show uploading message
$("#profile_picture").html('<div class ="update_load" style="padding:10px"><img class="load_pic" src="images/ajax-loader.gif" alt="Please Wait"/> </div>');
$(this).ajaxSubmit({
target: '#profile_picture',
success: afterSuccess //call function after success
});
});
});
the feedback from the ajax is the picture like this
echo '<img class="profile" src="uploads/'.$name.'.'.$ext.'" >';
Now i want to transfer the $name variable on the other process.php file to my current index.php file so that i can insert it using the MySQL Query . i dont know how to do that . And my second question is that if a user changes his picture more than once in the registration form , how would i delete all of his previous uploads ?
ok, this is what I do and I believe that can help you:
1) generate a timestamp + randon number > magic number
2) use uploadify jquery plugin to upload the photo to a temp folder (you can upload photos from the same form where the user completes personal data)
3) save that file with the magic number as the name (you can upload as many as you want over writing the previous one)
4) POST that generated number along with the rest of your form with the user data
choose a number 5):
5a) When saving the data, simply rename the temp file to a final folder with your new id from mysql
5b) leave the temp file as it is, just move it to a final folder and use the magic number to store it in your database
hope this helps!
You can write an afterSuccess function taking response as parameter.
$(this).ajaxSubmit({
target: '#profile_picture',
success: afterSuccess(data) //call function after success
});
function afterSuccess(data)
{
//parse your response to take the name
//make another ajax request to save it to database
}
This function can handle the new picture uploads too.
You will make that checks in php level (the ajax called)
Parse the img string to take src like that:
var img = $('<img class="profile" src="uploads/gaidouri.jpg" />');
var src = $(img).attr('src');
Related
I'm using a lightweight image editor jQuery plugin called andyvr/picEdit
https://github.com/andyvr/picEdit
This is just a plugin that turns an input:file element into an HTML canvass, and allows the user to select/edit/crop/manipulate an image file on the client side. The actual uploading and processing is done via the usual FORM UPLOAD and PHP $_FILE processes.
What I wanted to do is grab the "edited" picture data from this plugin and send it via $.post() instead of through the Form submit action.
Do you guys know what element I should select to include in my post variables?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
I tried to go through the JS file but I can't seem to figure it out.
PS
I hope I came across clear with this question. I was having a hard time structuring it.
Assuming you are using the same picedit as I used and are still looking for an answer:
The html file input:
<input type='file' name='thefile' id='thebox'>
The jquery to make the file input act like an image edit box:
$(function() {
$('#thebox').picEdit();
});
The post command:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
Notes:
handler.php = the name of the file that you want to use to process the input!
<div id='photos' name='photos'>
is a standard div tag that I use to update onscreen info in another part of the page! So, document.getElementById( 'photos' ).innerHTML will load handlers.php in to the photos div tag!
Use:
foreach($_FILES as $file)
to process the images as normal file upload from a web page!
I have one other button that pulls it all together. After I finish editing the image, I click on an update button that calls the handler and uploads and saves the file as well as dynamic updating of a photoalbum section elsewhere on the page.
TODO:
If I could find a way to attach a callback function I would not need to use this separate button.
I'm trying to build an upload pictures system: when an upload is done at 100%, with ajax the user can see a preview of the picture. Then finaly he can choose or not to save the picture.
My issue is: in any case, if he chooses or not to save the picture, the picture will be already uploaded.
what is the best way to delete the picture if the user is changing the current url or if he is closing the current page?
you can add the column to database and with flag you can can know the user save the uploaded picture or not . and you can delete all picture that are noe save.
You can first upload the picture to temporary folder, then, when user clicked on save move it to its target location, at this case, if user leaved the page, the picture was in temp folder that you can delete all files inside that folder daily...
Another option is to use HTML5 file system API to read the file and show up thumbnail before upload, so that you can show confirmation before upload it...
Try
Calling php ajax on window unload . Something like
$(window).unload( function ()
{
$.ajax({ url: "update.php",
data: {'name':'pathtofile'},
type: 'POST'
success: function(){
alert("done");
}});
}
);
in update.php do
unlink($_REQUEST['name'])
I have a file with title ad.php and contains
<img src="bannerimg.png">
and in another file i have:
<iframe src="ad.php"></iframe>
Question is how to count click on iframe!
Just do this if using javascript....
var clik = 0;
$('#myframe').click(function(){
clik++
alert(clik);
});
UPDATE WITH AJAX
$(document).ready(function(){
$('#myframe').click(function(e){
e.preventDefault();
$.ajax({
url : "countclick.php",
success: function(){
alert('done');
}
});
});
});
Then in your php file countclick.php you just retrieve the current value from database, and increment it and update.
Or just execute an increment query directly, without retrieving current value
Im assuming you know how to do that in php/mysql , so Im not gonna post that part
You would have to catch the click event somewhere on the client side (in JavaScript most likely) and then send a request back to the server notifying it of the banner click.
I am using file upload in my current project. When I click browse button, the file will be uploaded automatically and read number of lines and display that details immediately. I finished this task.
But when I will uploaded large size of file it will take some time to upload. So I need to implement file uploading progress bar.
I used the the following example.
http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html
http://mootools.net/forge/p/form_upload
<script>
window.addEvent('domready', function(){
var upload = new Form.Upload('files', {
onComplete: function(){
alert('Completed uploading the Files');
}
});
if (!upload.isModern()){
// Use something like
}
});
</script>
This script working well.
But when I will click submit button, that time will be displaying progress bar.
I need to change when I will click browse button that time will be display the progress bar. I don't know how to change.
You are using mootools plugin javascript library that allows you to upload files and track the progress. It has little to do with PHP.
Since demo and documentation for it doesn't have progress tracking, if you look closely at https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js then you'll see that progress doesn't have any callback in it..
onProgress: function(event){
var loaded = event.loaded, total = event.total;
progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
},
so you need to either
Use suggested HTML it expects (<div class='progress'></div>), OR
Add your custom behaviour by extending options it includes before that
So I'm struggling a bit to find what I'm looking for and how to implement it.
I have a basic PHP file uploader working, in that a user presses a custom upload button, selects a file and then using JS, it checks for a change (Ie. the user selecting a file) and then submits the form which uploads the image fine.
What I also want now is a drag & drop to upload area. So the user can drag an image from their file explorer and drop it in a designated place (not the whole page) and then once that image has been dropped for the form to submit automatically with their image and use the same PHP processing.
Is this possible and realistic?
This is absolutely realistic and possible without using any third parties plugin.
The following snippets should give you an idea of how it could work:
Drop area
$(".drop-files-container").bind("drop", function(e) {
var files = e.originalEvent.dataTransfer.files;
processFileUpload(files);
// forward the file object to your ajax upload method
return false;
});
the processFileUpload()-Method:
function processFileUpload(droppedFiles) {
// add your files to the regular upload form
var uploadFormData = new FormData($("#yourregularuploadformId")[0]);
if(droppedFiles.length > 0) { // checks if any files were dropped
for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files
}
}
// the final ajax call
$.ajax({
url : "upload.php", // use your target
type : "POST",
data : uploadFormData,
cache : false,
contentType : false,
processData : false,
success : function(ret) {
// callback function
}
});
}
form example
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
Feel free to use something like this as a starting point. The browser support of this you can find here http://caniuse.com/#feat=xhr2
Of course you can add any extras you wish like progress bar, preview, animation...