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 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

Hi guys, Most of the examples require an upload button. but im looking for a auto upload once user select the file for upload. and this will all be done without refreshing the page. — chrizonline, Jul 02 '10 at 09:07

score 7 · Answer 1 · answered Jun 27 '10 at 08:34

7

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.

answered Jun 27 '10 at 08:34

Luke Stevenson

10,357
2
26
41

hey this is what im looking for. but there isn't any file download for it. but i will try to piece the codes together from view source =) – chrizonline Jul 02 '10 at 10:01
1st. Its not a jquery solution. 2nd. Its not even ajax solution. If you look carefully to js source files you will discover that this is iframe solution. – codez Jul 02 '10 at 11:54
@codez - You are both right and wrong. I never said it was an AJAX solution, so that point is moot. Yes, the AJAX Upload function does use an iframe to perform the work, but, that function has been wrapped into a jQuery plugin. So, in essence, it is a jQuery solution. – Luke Stevenson Jul 02 '10 at 12:01
hmm okay. from the solution, i dun see where is the php script call to upload the image. – chrizonline Jul 02 '10 at 13:27
@Lucanos - In comment on my answer you said that it can be done with AJAX, so I think that you thought that it is ajax solution, in fact there is no way you can send file via ajax in standart browser with no special browser plugins or configuration. And Ajaxupload in that example is not wrapped in jquery plugin, look how it is called in sample: new AjaxUpload(). jquery plugins are called through $ object. If it were jquery plugin, it would be called like: $('.some').AjaxUpload({...}); – codez Jul 02 '10 at 13:44
hi can i know how i can post $_FILES value into php script?? im able to call upload.php but the $_FILES value is empty – chrizonline Jul 02 '10 at 13:50
@codez: I am more than happy to concede the point, the comment regarding AJAX was in reply to your solution (hence I lost track of it until just then) and was before I had researched the idea further. Agreed AJAX cannot handle files. Again, this became obvious as I looked further. The example I posted a link for was posted "from-the-hip" I didn't look further to see how the supporting code worked, I just saw the article saying that it did and referring to jQuery. Regardless - it works, and that's what matters, not the minor details of a brief response. – Luke Stevenson Jul 02 '10 at 14:01
@codez: (follow-on) If you want to discuss the inaccurate use of "AJAX" in the article I linked to, it may better be addressed to the author on Zurb.com. I have posted a comment under your solution correcting my incorrect comment regarding use of AJAX to handle the file upload. – Luke Stevenson Jul 02 '10 at 14:06

score 4 · Answer 2 · edited Nov 12 '12 at 01:02

4

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

edited Nov 12 '12 at 01:02

greeness

15,956
5
50
80

answered Nov 12 '12 at 00:31

P.B.

41
1

score 1 · Accepted Answer · answered Jun 27 '10 at 07:24

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.

answered Jun 27 '10 at 07:24

codez

1,381
1
18
28

1

You could use AJAX. IFrames would have been a pre-AJAX solution. – Luke Stevenson Jun 27 '10 at 08:29
Tks. i've search quite abit for iframe but most of it needs user to click on the upload button. i would love to see those which can auto upload once user select the file. – chrizonline Jul 02 '10 at 10:02
CORRECTION: As pointed out by @codez and @bas, files cannot be uploaded through AJAX. My mistake. – Luke Stevenson Jul 02 '10 at 14:05
hi lucanos, so wat is the way around it? can i use ajax submit to post $_FILES to php files?? – chrizonline Jul 02 '10 at 14:50
1

@nuttynibbles: Look at the tutorial I linked you to, it should have all the code, links, and instructions you need to achieve the same kind of functionality you require. – Luke Stevenson Jul 03 '10 at 13:44
tks i managed to solve it using iframe with YUI lib =) so basically this YUI library detects onchange event and post to the php script which would handle upload request =) – chrizonline Jul 16 '10 at 17:21

score 1 · Answer 4 · answered Jun 27 '10 at 08:27

1

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.

answered Jun 27 '10 at 08:27

bas

573
2
10

score 0 · Answer 5 · answered Oct 05 '14 at 09:49

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>

score 0 · Answer 6 · edited Oct 31 '14 at 13:12

<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.

score 0 · Answer 7 · answered Jun 27 '10 at 08:38

0

php & jquery upload image and preview display instantly

7 Answers7

Linked