Hello

Today we will discuss about Asynchronous file upload with jQuery.

In order to upload the files to server asynchronously you can follow any of the following practices:

• use a plugin
• without using a plugin
  
  

In this post, I will explain about how to upload files without a plugin.

To achieve the file upload functionality without any plugin we make use of Ajax request and Formdata objects.

HTML :

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

jQuery:

var formData = new FormData();
formData.append( 'file', $( '#fileOne' )[0].files[0]);

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

Ajax:

function ajaxFileUpload(FileUrl,formData,requestTimeout)
{if(!requestTimeout)requestTimeout = 50000;

$.ajax({url: strFileUrl, 
type: 'POST,
timeout: requestTimeout,
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
}); 
}