php & jquery upload image and preview display instantly

Question

im looking forward to create an upload module where user can browse, click open and it will instantly display a preview of that image without having to click a submit button

Answer 1

For everyone can't find the ajaxupload.js script... You can download it here.

Answer 2

You can post image only by posting form, so you must use iframe to upload image without reloading main page. When iframe reloads, add some script in its response which triggers callback function in main page to display just uploaded image.

Answer 3

I saw an article with a jQuery solution for this recently:

Zurb Playground : "Image Uploads with 100% Less Suck. Guaranteed."

I would rewrite it here, but have not as it would be redundant.

Answer 4

This requires no submit button. You can just use an image and browse for files and it will automatically send it to php.

<div id="covercameraimage">
<label for="photoimg">
<img src="siteimages/cameracoverimage.png" style="cursor:pointer" title="Upload Cover" alt="Upload Cover" />
</label>
<form id="imageform" method="post" enctype="multipart/form-data" action='c.php'>
<div id='imageloadstatus' style='display:none'><img src="load.gif" alt="Uploading...."/></div>
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<div id='imageloadbutton'>
<input type="file" id="photoimg" name="photoimg" style="cursor: pointer;  display: none"//>
</div>
</form>
</div>

<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#usercover',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>
</div>

Answer 5

You might like to try this tutorial:

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

which should help you do exactly what you are asking.

Answer 6

Files cannot be uploaded using pure AJAX. You may want to checkout the Form Plugin which does support file uploads: http://jquery.malsup.com/form/ and integrate it into your solution. There you have few good examples using ajaxSubmit.