Ajax+h5 upload file + progress bar

1. Replace form form to use new formdata for transmission

2. Upload file control on the page:

<input type= "File" id= "file" class= "Mr10 ml10 input-medium" >

3.ajax Implementation upload:

function Uploadsaveprojects (obj) {
    var fileobj = document.getElementById ("file"). Files[0];//Get File Object
    var Filecontroller = BaseURL + "Project/upload";                    Receive the uploaded file background address 
    //FormData object
    var form = new FormData ();
    Form.append ("Author", "Hooyes");                        Can increase the form data
    form.append ("file", fileobj);                           File Object
    //XMLHttpRequest object
    var xhr = new XMLHttpRequest ();
    Xhr.open ("Post", Filecontroller, true);
    Xhr.onload = function () {
        alert ("Upload complete!");
    Implement progress bar function
    //Xhr.upload.addEventListener ("Progress", progressfunction, false);
    Xhr.send (form);
}

4. Background can be used in any language to upload, add a progress bar, using the H5 tag

<progress  id= "ProgressBar" value= "0" max= "M" ></progress>
<span id= "Percentage" ></ Span>

5. Increase control of the progress bar JS Event

function Progressfunction (evt) {
    var ProgressBar = document.getElementById ("ProgressBar");
    var percentagediv = document.getElementById ("percentage");
    if (evt.lengthcomputable) {
        Progressbar.max = evt.total;
        Progressbar.value = evt.loaded;
        percentagediv.innerhtml = Math.Round (evt.loaded/evt.total *) + "%";
    }
}

6.formData What the hell is this thing?

XMLHttpRequest Level 2 Adds a new interface formdata. Using the Formdata object, we can simulate a series of form controls using JavaScript with some key-value pairs, and we can also use the XMLHttpRequest send () method to commit the "form" asynchronously. The great advantage of using formdata is that we can upload a binary file asynchronously compared to ordinary Ajax.

Newer versions of all major browsers already support this object, such as Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

Detailed Introduction: http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html