php & jquery upload image and preview display instantly

问题

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 so that user can continue to key in other information.

i've done a simple but incomplete jquery below which basically capture the image name. but my question is how do i post the upload image to the php script since there is there is no submit button for POST? i cant capture $_FILES array values.

jquery:

$(document).ready(function() {
  $("#uploadimage").change(function() {
      var imagesrc = $("#uploadimage").val();
      $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
      function(data){
        //do something here
      },"json");
  });
});

html form:

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

i've seen what Uploadify can do but i would like to create one on my own.

regards

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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.

回答5:

回答6:

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>

回答7:

<div class="control-group-upload">
     <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
             <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                 <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
             </div>
         <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
         <div>
             <span class="btn btn-file"><span class="fileupload-new">Select image</span>
             <span class="fileupload-exists">Change</span>
             <input type="file" class="default" />
         </span>
     <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
     </div>
</div>

The above code is from bootstrap. Check out metronic template of bootstrap.

来源：https://stackoverflow.com/questions/3126464/php-jquery-upload-image-and-preview-display-instantly

标签

php

jquery

upload