Press "Enter" to skip to content

Asynchronously files upload with jQuery

Have you ever uploaded files with jquery without using any plugin.
If “NO”, then try to do it using Ajax request and Formdata objects.

Finally done it,after experiment.

To upload files please start with “html form ”


<form id="upload_form" enctype="multipart/form-data">
<input name="file_name" type="file" id="file_name" />
<input type="button" value="Upload File" />


Initiate formData object and then appending file  field to it using append() method it to file as:


var formData = new FormData();
formData.append( ‘file’, $( ‘#file_name’ )[0].files[0]);

var FileUrl    = ‘upload.php?action=uploadfile’;
var uploadRes    = ajaxFileUpload(FileUrl,formData);


Now, to handle file , upload use ajax as function ajaxFileUpload as below :


function ajaxFileUpload(FileUrl,formData, request_timeout)
request_timeout = 50000;

url: strFileUrl,  //server script to process data
type: ‘POST’,
timeout: request_timeout,
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false



Hope, you have got the solution !!

Leave a Reply

Your email address will not be published. Required fields are marked *