h5 implement drag and drop upload image
This article will introduce how to use JS to implement drag-and-drop upload images.
First, we want to disable the browser default drag-and-drop event:
1Window.onload =function(){2 //drag away from3Document.addeventlistener (' DragLeave ',function(e) {E.preventdefault ();});4 //drag and drop back5Document.addeventlistener (' Drop ',function(e) {E.preventdefault ();});6 //dragged into7Document.addeventlistener (' DragEnter ',function(e) {E.preventdefault ();});8 //drag and drop them.9Document.addeventlistener (' DragOver ',function(e) {E.preventdefault ();});Ten};
Then define a drag-and-drop area on the page, which is where we want to place the picture back:
1 <div id= "Dragimg" ></div>
To bind a drag event:
1 var box = document.getElementById ("dragimg");
Box.addeventlistener ("Drop",function(e) {e.preventdefault ();//Cancel default Browser drag effect varFileList = E.datatransfer.files;//get File Object if(Filelist.length = = 0) {return false;} if(Filelist[0].type.indexof (' image ') = = =-1) {alert (' You are not dragging pictures! ‘) return false; } varimg = window. Url.createobjecturl (filelist[0]);//var filesize = Math.floor ((filelist[0].size)/1024);$ ("#dragImg"). CSS ({"Background": "url (" +img+ ") No-repeat Center Center", "Backgroundsize": "100% 100%"}); varImgdatatype = Filename.split (".") [1]; varFormData =NewFormData (); Formdata.append ("Name", filelist[0],imgdatatype); Name: the element for which the form is uploaded at half name is the $.ajax ({type:"POST", URL:' Your Ajax URL ',//ajaxurl async:false, DataType:"Text", Data:formdata, ProcessData:false, ContentType:false, Success:function(data) {if(data) {
$ ("#dragImg"). CSS ({"Background": "url (" +data+ ") No-repeat Center Center", "Backgroundsize": "100% 100%"}); }Else{console.log (data)}},error:function(e) {Console.log (e)}}) },false);
This is the front-end processing method of picture drag and drop uploading, over!
H5 drag and drop upload image