Upload image with jquery and display results
I know t开发者_StackOverflowhis is a typical question but i've tried alot of things and haven't got it to work yet. I have a form where i want to upload an image, and as i've come to understand jquery natively doesent support imageupload in form submits. So we begin with the html i have:
<form action="uploadImage.php" method="post" enctype="multipart/form-data" id="image_form" name="image_form">
<input type="file" name="addImage" />
<input type="submit" name="submit" value="submit" />
</form>
<div id="results">
</div>
And then we have the javascript:
$(document).ready(function() {
$('#image_form').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#results').load('Images.php'); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
});
Something tells me i need an implentation of http://malsup.com/jquery/ but i don't really understand how. And my php script for image upload works fine and is great, so it would be cool if I just could use the forms action but submit it with jquery.
Best regards
You can't serialize file inputs. To upload something asynchronously and make it work in all browsers, you need to use the hidden iframe trick. I'd recommend finding a jQuery plugin for that. Here is one you can try.
I suggest you to use some plugin like uploadify.
精彩评论