Home How can I upload files asynchronously?

# How can I upload files asynchronously?

user11124
1#
user11124 Published in September 19, 2018, 7:23 pm

I would like to upload a file asynchronously with jQuery. This is my HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>


And here my Jquery code:

$(document).ready(function () {$("#uploadbutton").click(function () {
var filename = $("#file").val();$.ajax({
type: "POST",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function () {
}
});
});
});


Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

### Current Solution

I am using the jQuery Form Plugin to upload files.

• you are only getting the file name because your var filename is getting the value of \$('#file'), not the file that lies in the input – Jimmy Nov 3 '09 at 16:01
• Here's a good one: http://blueimp.github.io/jQuery-File-Upload/ - HTML5 ajax uploading - Graceful fallback to iframes for unsupported browsers - Multi-file async upload We've used it and it works great. (Documentation here) – Ashish Panery Apr 12 '13 at 18:35
• jQuery Form Plugin seems the most simple-to-use and cross-browser compatible way... am I right ? – Lyth Sep 18 '13 at 12:32
• Check also this: stackoverflow.com/questions/6974684/…, here it explains how to achieve it via jQuery – Chococroc Jan 15 '14 at 12:09
• @Jimmy How would he get the get the file that lies in the input instead? – alex Dec 5 '14 at 18:05