<! DOCTYPE html>"UTF-8"> <title></title> <script src="Html5/js/jquery-2.0.0.min.js"></script> "Image"Id="Dropbox"style="Position:relative;min-width:300px;min-height:100px;text-align:center;line-height:100px;color: #777; font-size:32px;border:3px dashed silver;"> <input style="color: #fff; width:100%;height:100px;margin:0px Auto;cursor:pointer;position:absolute;top:0px;right:0px;o Pacity:0;filter:alpha (opacity=0);"Id="myfile"Name="myfile"Type="file">please drag and drop the picture here</div> <div style="width:250px;height:250px;"> "showimg"style="min-width:250px;height:250px;"Src=""/> <p id="inofimg"style="width:150px;height:50px;"></p> </div> </body> <script type="Text/javascript">$ (function () {$ (document). On ({dragleave:function (e) { E.preventdefault (); }, Drop:function (e) {e.preventdefault (); }, Dragenter:function (e) {e.preventdefault (); }, Dragover:function (e) {e.preventdefault (); } }); varDropboxfile = document.getElementById ("Dropbox"); Dropboxfile.addeventlistener ('Drop', Function (e) {e.preventdefault (); varFileList =E.datatransfer.files; varFileNum =filelist.length; if(filenum==0){ return false; } if(filelist[0].type.indexof ('Image')=== -1) {alert ('The file is not a picture'); return false; } varImgurl = window. Url.createobjecturl (filelist[0]); varImgname = filelist[0].name; varImgsize = Math.floor ((filelist[0].size)/1024x768); if(imgsize>1024x768) {alert ('file size cannot exceed 1M'); return false; } varinfo ="<span> filename '"+imgname+"' </span><span> file Size '"+imgsize+"' kb</span>"; $("#showimg"). attr ('src', Imgurl); $("#inofimg"). HTML (info); }) }); </script>Here are mainly used to three one is HTML5 of this several drag dragleave,drop,dragenter,DragOver, two is addeventlistener monitoring, three is HTML5 's File API
Picture drag and drop upload