JS implementation asynchronous upload picture + preview

Two kinds of JS implementation, one with native Ajax, the other with jquery, the example is relatively simple, directly on the code.

<! DOCTYPE html> for= "uname" class= "col-md-3 control-label span3" > Name:</label> <div class= "col-md-9" > <input type= "text" class= "Form-control span3" value= "id=" uname "name=" uname "placeholder= "Please enter name" > </div> </div> <div class= "control -group "> <label for= "pwd" class= "col-md-3 control-label span3" > Password:</label> <div class= "col-md-9" > <input type= "Password" class= "Form-control span3" value= "" id= "pwd" name= "pwd"placeholder= "Please enter password" > </div> </div> <div class= "control                        -group "> <label class=" col-md-3 control-label span3 "></label>                        <div class= "col-md-9" >                         </div> </div> <div class= "Control-group" > <label for= "requirement" class= "col-md-3 control-label span3" > Image upload </label> <div class= "col-md-9" &                            Gt <div class= "Input-group" > <input id= "photocover" class= "Form-control" ReadOnly Typ e= "text" > <label class= "input-group-btn" > <i Nput id= "File" type= "file" name= "file" style= "left: -9999px; Position:absolute; "                                > <span class= "btn Btn-default" >Browse</span> </label> </div> </div> </di v> <div class= "Control-group" > <label class= "col-md-2 Control-label Span2 "></label> <div class=" col-md-10 "> <a class=" btn Btn-small btn-primary "onclick=" saVeuser () "> Mode one </a> <a class=" btn btn-small btn-danger "onclick=" SaveUser2 () "> Way II & lt;/a> </div> </div> </form> <         /div> </div> </div> <script>//HTML5 implement picture preview function$(function () {            $("#file"). Change (function(e) {varFile = E.target.files[0] | | E.datatransfer.files[0]; $(' #photoCover '). Val (document.getElementById ("file"). files[0].name); if(file) {varReader =NewFileReader (); Reader.onload=function () {                        $("img"). attr ("src", This. Result);                } reader.readasdataurl (file);        }            }); })        //Mode one JQuery Implementation        functionSaveUser2 () {varid = $ ("#id"). Val (). Trim (); varuname = $ ("#uname"). Val (). Trim (); varPWD = $ ("#pwd"). Val (). Trim (); varFile = document.getElementById ("file"). files[0]; varFormData =NewFormData (); Formdata.append (' ID ', id); Formdata.append (' Uname ', uname); Formdata.append (' PWD ', PWD); Formdata.append (' File ', file); $.ajax ({URL:"/home/about", type:"POST", Data:formdata, ContentType:false, ProcessData:false, MimeType:"Multipart/form-data", Success:function(data) {Console.log (data); }, Error:function(data) {Console.log (data);        }            }); }        //Mode twoNative AJAX implementations        functionSaveuser () {varid = $ ("#id"). Val (). Trim (); varuname = $ ("#uname"). Val (). Trim (); varPWD = $ ("#pwd"). Val (). Trim (); varFile = document.getElementById ("file"). files[0]; //Native Ajax implementation file upload            varform =NewFormData (); Form.append ("Uname", uname);//you can increase the form dataForm.append ("id", id); Form.append ("PWD", PWD); if(file) {Form.append ("File", file); }            //Get XHR Object            varXHR =NULL; if(XMLHttpRequest) {XHR=NewXMLHttpRequest (); } Else{XHR=NewActiveXObject ("Microsoft.XMLHTTP"); } xhr.open ("Post", "/home/about",true);//set submission method, URL, asynchronous commitXhr.onload =function () {                vardata = Xhr.responsetext;//Get return valuealert (data);        } xhr.send (form); }    </script></body>
Attention:
1, with the JQuery method need to add two parameters Contenttype:false and Processdata:false, set Ajax does not need to serialize the file object
2, two ways in the organization parameters need to apply var form = new FormData ()
JS implementation asynchronous upload picture + preview