HTML5 File Upload Preview

function Draguploadfile (d) {this.dom = document.getElementById (d);//drag Dom this. FileType; Upload file type limit this. filetypenomsg; Upload file limit description this.imgcallback; Gets the file success callback method for this. Ajaxpath; File upload path this. Ajaxcallback;    File Upload Completion callback method//Block Browser default event Document.addeventlistener ("DragLeave", function (e) {e.preventdefault ();    }, False);    Document.addeventlistener ("Drop", function (e) {e.preventdefault ();    }, False);    Document.addeventlistener ("DragEnter", function (e) {e.preventdefault ();    }, False);    Document.addeventlistener ("DragOver", function (e) {e.preventdefault (); }, False);}    Set complete load binding DragUploadFile.prototype.Load = function () {var dom = This.dom; var FileType = this.    FileType; var filetypenomsg = this.    filetypenomsg; var Callback = this.    Callback; var Ajaxpath = this.    Ajaxpath;    var imgcallback = This.imgcallback; var ajaxcallback = this.    Ajaxcallback;   Dom.addeventlistener ("Drop", Function (e) {e.preventdefault (); var fileList = e.datatransfer.files; Get the file list if (Filelist.length = = 0) {return;//no file returned} var ifile; File object//Check file type if (FileType! = null) {if (Filelist[0].type.indexof (FileType) >-1) {
                IFile = Window.webkiturl?window.webkiturl.createobjecturl (filelist[0]): window.             Url.createobjecturl (Filelist[0]);                } else {alert (filetypenomsg);            Return        }} if (Imgcallback! = null) {imgcallback (ifile);            } if (Ajaxpath! = null) {//uploads Upajax = new XMLHttpRequest ();            Upajax.open ("Post", Ajaxpath, True);            Upajax.setrequestheader ("X-requested-with", "XMLHttpRequest");            var postdata = new FormData ();            Postdata.append ("Pic", filelist[0]);            Upajax.send (PostData);                     Upajax.onreadystatechange = function () {if (Upajax.status = = && Upajax.readystate = = 4) {//complete                    return data var retvla = Upajax.responsetext;                    Eval (retf + "('" +retvla+ "')");                Ajaxcallback (RETVLA); }}}}, False);} Call//define variable box Idvar drag = new Draguploadfile ("drag");//Set Receive file type, and error prompt can not be set, default to all type drag. Filetype= "video";d Rag. filetypenomsg= "Please upload video";d rag.imgcallback=function (file) {};//settings get to the file callback method//drag. Ajaxpath= "/default/upfile";//Set Ajax file upload address//drag. Ajaxpath=function (data) {alert (data)};//Set upload callback method//Set up, load drag. Load ();

In the drop event, because this point has changed, the property has been declared again .... I'll write it again later.

HTML5 File Upload Preview