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

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

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: https://i.sstatic.net/0408T.gif

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

• javascript
• jquery

3 Answers 3

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/

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
  });
});

just set the auto to true.. 'auto':true