HTML5 JavaScript File Upload

functionFileUpload (targeturl) {//Hide Form name    varInputName = ' _fileselect '; //File Size     This. fileSize = 0; //Upload Form name    varFormName = ' '; varcallback =NewObject (); //initialization function    functioninit () { This. Uploadurl =TargetUrl; varBtnobject =Getfileobject (); Btnobject.onchange=function(){        varFileobj =Getfileobject (); varFD =CreateForm (fileobj); varXHR =NewXMLHttpRequest (); Xhr.upload.addEventListener ("Progress", listenerprocess,false); Xhr.addeventlistener ("Load", Listenerload,false); Xhr.addeventlistener ("Error", Listenererror,false); Xhr.addeventlistener ("Abort", Listenerabort,false); Xhr.open ("POST", TargetUrl);    Xhr.send (FD);    }; }        //Get Form Object    functionGetfileobject () {if(!document.getElementById (InputName)) {        varBtn=document.createelement ("Input"); Btn.setattribute ("Type", "File"); Btn.setattribute ("Style", "Display:none;"); Btn.setattribute ("id", InputName);    Document.body.appendChild (BTN); }    returndocument.getElementById (InputName); }        //selected in the file     This. Selectfile =function(name) {FormName=name; document.getElementById ("_fileselect"). Click (); }    //External Process Monitoring     This. Processlistener =function(callbackprocess,callbackfinish) {callback.process=callbackprocess; Callback.finish=Callbackfinish; }        //Generating Form Objects    functionCreateForm (fileobj) {varFD =NewFormData ();  This. fileSize = Fileobj.files[0].size; Fd.append (FormName, fileobj.files[0]); returnFD; }        //Processing Progress Response monitoring    functionlistenerprocess (evt) {callback.process (evt.position/evt.totalsize * 100); }        //processing Complete Response monitoring    functionListenerload (evt) {callback.finish (evt.target.responseText); }        //Handling Error Response monitoring    functionListenererror (evt) {}//Handling Termination Response monitoring    functionListenerabort (evt) {}//Active Initializationinit ();}

Call

//when instantiating an object, the upload URL is a parametervarFileobj =NewFileUpload ('/user_center/user_place/upload_logo ');//upload monitoring the first parameter for the upload progress notification, the second parameter for the upload to complete the return of the serverFileobj.processlistener (function(val) {//Upload Process processing},function(val) {varobj = eval (' (' +val+ ') '); if(obj.state== ' 1 '){        $(' #preView '). attr (' src '), Obj.url); $(' Input[name= ' Placelogo "] '). Val (Obj.url); }Else{alert (obj.error); }});//Click on the Upload button to trigger the following method, the parameter is the form nameFileobj.selectfile (' logo ');

HTML5 JavaScript File Upload