Start upload after choosing a file, using jQuery.

Question

After having chosen a file for upload, I want the file to be uploaded to database without the click of a button. How is this done using jQuery?

I would like to choose a file like this: http://i.stack.imgur.com/0408T.gif

<input type="file" valign="baseline" /> 

Answer 1

Assuming you're using a form:

// select the file input (using a id would be faster) $('input[type=file]').change(function() {      // select the form and submit     $('form').submit();  }); 

EDIT: To keep this answer up-to-date:

There is a nice way to upload files via AJAX without hacks described here: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 2

Use jQuery's plugin uploadify

It's great plugin which has many options, and auto-upload, too

$(document).ready(function() {   $('#file_upload').uploadify({     'uploader'  : '/uploadify/uploadify.swf',     'script'    : '/uploadify/uploadify.php',     'cancelImg' : '/uploadify/cancel.png',     'folder'    : '/uploads',     'auto'      : true   }); });