File drag upload JSP

in the development process of large enterprises, a lot of more interesting and practical functions are often discouraged, I bring you a Baidu cloud disk and 360 cloud disk HTML5 multi-file drag upload technology:1: Remember import: common-Fileupload.jar package. Upload upload.jsp page<% @pageImport= "Org.apache.struts2.json.JSONUtil"%><% @pageImport= "Java.io.File"%><% @pageImport= "Org.apache.commons.fileupload.FileItem"%><% @pageImport= "Org.apache.commons.fileupload.servlet.ServletFileUpload"%><% @pageImport= "Org.apache.commons.fileupload.disk.DiskFileItemFactory"%><% @pageImport= "Org.apache.commons.fileupload.FileItemFactory"%><% @pageImport= "Java.text.DecimalFormat"%><%@ page language= "Java"Import= "java.util.*" pageencoding= "UTF-8"%><%request.setcharacterencoding ("UTF-8"); Response.setcharacterencoding ("UTF-8"); //get a specific directory of file uploadsString Realpath = Request.getrealpath ("/"); //define the uploaded directoryString Dirpath = realpath+ "/upload"; File Dirfile=NewFile (dirpath);//automatically create an uploaded directory if(!dirfile.exists ()) dirfile.mkdirs (); //Upload OperationFileitemfactory factory =Newdiskfileitemfactory (); //Servletfileupload upload =Newservletfileupload (Factory); String FileName=NULL; HashMap<String,Object> map =NewHashmap<string,object>(); Try{List Items= Upload.parserequest (request);//3name=null Name=null   if(NULL!=items) {Iterator ITR=Items.iterator ();  while(Itr.hasnext ()) {Fileitem Item=(Fileitem) itr.next (); if(Item.isformfield ()) {Continue; }Else{fileName=Item.getname (); intpos = Filename.lastindexof (".")); String ext=filename.substring (POS, Filename.length ()); FileName= Uuid.randomuuid (). toString () +ext;//directory where files are uploadedFile Savedfile =NewFile (dirpath,filename);                   Item.write (Savedfile); Map.put ("Name", Item.getname ());//the original name of the fileMap.put ("NewName", fileName);//the new name of the fileMap.put ("Size", item.getsize ());//the true size of the fileMap.put ("url", "upload/" +filename);//gets the directory of the specific server for the file//I can create a file table. The uploaded file exists in the table.--Folder Table A file table---cloud Disk              }            }     }   }Catch(Exception e) {} out.print (Jsonutil.serialize (map ));%>main.jsp<%@ page language= "Java"Import= "java.util.*" pageencoding= "UTF-8"%><! DOCTYPE html>{padding:0px;margin:0px} body{font-family: "Microsoft Jas Black"; font-size:12px;background: #394E48; color: #fff;} . demo{width:900px; margin:50px auto;position:relative;} #drop_area {width:100%; height:100px; border:3px dashed silver; line-height:100px; Text-align:center; font-size:36px; color: #d3d3d3} #preview {width:900px; overflow:hidden;border:1px dashed silver; margin-top:10px;} #preview div{float: left;padding:9px;text-align:center;margin:6px;background: #f9f9f9; width:195px;height:160px;} #preview img{width:80px;height:80px;} #program {background:#999; Height:100px;color: #d3d3d3;p osition:absolute;top:0px;left:0px;background:linear-gradient (#141414, red); opacity : 0.5} </style> class= "Demo" > <div style= "text-align:center;margin-bottom:20px;" >
var timer=NULL; //drag-and-drop event-call when leavingDocument.ondragleave =function (e) {e.preventdefault (); document.getElementById ("Drop_area"). Style.background= "None"; Console.log ("Drag and move Away");      }; //after dragging the sideDocument.ondrop =function (e) {e.preventdefault (); document.getElementById ("Drop_area"). Style.background= "None"; document.getElementById ("Drop_area"). InnerHTML = "Please, the file crosses ..."; var p= 0; Timer=setinterval (function () {if(p>=100) P=0; document.getElementById ("program"). style.width=p+ "%"; P++; },17); Console.log ("Drag to lift");      }; //when you drag and moveDocument.ondragover =function (e) {e.preventdefault (); document.getElementById ("Drop_area"). style.background= "Linear-gradient (#141414, #ff0000)"; Console.log ("Drag When moving");      }; Document.ondragenter=function (e) {e.preventdefault (); document.getElementById ("Drop_area"). style.background= "#141414"; Console.log ("Drag When pressed");      }; function Tmupload () {var box= document.getElementById ("Drop_area");//Drag AreaBox.addeventlistener ("Drop", function (e) {//Monitoring post-drag eventsE.preventdefault ();//to cancel the default behavior of the browser//get File Objectvar fileList =E.datatransfer.files; //check if dragging files to pagevar length =filelist.length; if(length==0){   return false; }          for(Var i=0;i<length;i++) {var img=Window.webkitURL.createObjectURL (Filelist[i]); var filename=Filelist[i].name; var filesize=filelist[i].size; var str= "<div><p> Picture name:" +filename+ "</p><p> Size:" +filesize+ "kb</p> </div> "; document.getElementById ("Preview"). InnerHTML + =str; //uploading via XMLHttpRequest (Ajax)var xhr =NewXMLHttpRequest (); Xhr.open ("Post", "upload.jsp",true); Xhr.setrequestheader ("X-requested-with", "XMLHttpRequest"); //dynamically send form data with Formdatavar fd =NewFormData (); Fd.append ("Doc", Filelist[i]);      Xhr.send (FD); Xhr.onreadystatechange=function () {if(Xhr.readystate==4 && xhr.status==200) {setTimeout (function () {clearinterval (timer); document.getElementById ("Drop_area"). InnerHTML = "Please, the file crosses ..."; document.getElementById ("program"). Style.width= "0%"; },2000);         }   };   }   }); } tmupload ();//Start uploading</script> </body>
File drag upload JSP