How to upload files using jQuery Ajax, jqueryajax

How to upload files using jQuery Ajax, jqueryajax

Two objects are used to upload files using jQuery Ajax.

First object: FormData

Second object: XMLHttpRequest

Currently, new versions of Firefox and Chrome support HTML5 browsers perfectly support these two objects, but IE9 does not yet support FormData objects, and IE6 is still in use? You can only sigh in the sky ....

With these two objects, we can upload files in Ajax mode.

Sample Code:

<! DOCTYPE html> 
Simple code allows you to upload files in Ajax mode. In the above code, you can use the traditional file selection method <input type = "file"/> to generate file objects, HTML5 also supports multiple more flexible methods, such as dragging a file to a specified element.
Ajax has successfully uploaded the file, but now we will think of a problem, how to display the progress bar? With this question in mind, Flash? Browser plug-in ?.
NO. You don't need these items now.
Start with, first make a progress bar, and the progress bar is also very simple. Use the newly added HTML5 labels:
<progress id="progressBar" value="0" max="100"> </progress>
This will display a progress bar in the browser. What we need to do now is to change its Value in real time during the upload, and then hand over the progress display question to it.
Our server does not need to be modified. We only need to add an event to the XHR object in JS.
xhr.upload.addEventListener("progress", progressFunction, false)
When progressFunction is called, it will be passed into an event object. This object has two attributes: loaded and total, which respectively represent the uploaded value and the total value to be uploaded.
This is exactly what we need, so this method can be written as follows:
function progressFunction(evt) {   var progressBar = document.getElementByIdx_x_x("progressBar");   if (evt.lengthComputable) {    progressBar.max = evt.total;      progressBar.value = evt.loaded;   }  }
In this way, the upload progress is displayed.
The following is an adjustment for the first sample code above:
Sample Code 2 with progress:
<! DOCTYPE html> 
The program that receives files in the background can be written in any language (C #, PHP, Python, etc.). The above example uses C #
It's easy. You don't need to make any changes to this progress bar.
var flist = Request.Files;   for (int i = 0; i < flist.Count; i++)   {    string FilePath = "E:\\hooyes\\Files\\";    var c = flist[i];    FilePath = Path.Combine(FilePath, c.FileName);    c.SaveAs(FilePath);   }
The above section describes how to upload files using jQuery Ajax. I hope it will be helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!