Java implementation drag-and-drop upload

Original: http://www.open-open.com/code/view/1437358795584

In the project development due to the actual needs, the need to develop drag-and-drop upload function, ok!

Look first:

JSP upload front-end code:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <! DOCTYPE html> {padding:0px;      margin:0px;          } body {background: #394E48; Font-size:14px; Font-family: "Microsoft Ya Hei"; }. title {text-Align:center;          Color: #fff; Margin-top:50px;          }. demo {width:900px;          height:140px;      margin:50px Auto; }. Drag-Area {width:100%;          height:100px;          border:3px dashed #fff; Text-Align:center; Line-height:100px;          Color: #fff; Font-size:36px; Font-weight:700;          }}. Preview div {width:195px;          Overflow:hidden;          border:1px dashed silver; Margin-top:10px; float: Left;          padding:9px; Text-Align:center;      height:168px;          }. Preview img {width:80px;      height:80px; }      </style> class= "title" > the latest masterpiece of the Legend of the night! Java implementation drag-and-drop upload!! class= "Demo" > <divclass= "Drag-area" id= "Upload-area" >Drag the picture here</div> <!--photo Preview-<div id= "Preview"class= "Preview" ></div> </div> </body> <script type= "Text/javascript" >//1, File Upload HTML5 by drag drag the file to the browser's default event overlay//file leftDocument.ondragleave=function (e) {e.preventdefault (); Console.info ("The file left executed me!!" ");          }; //Mouse Release Filesdocument.ondrop=function (e) {e.preventdefault (); Console.info ("Release later executed me!" ");          }; //Mouse Move FileDocument.ondragover=function (e) {e.preventdefault (); Console.info ("The file moved after I was executed!" ");                    }; function Tm_upload () {var img1=""; var Uploadarea=document.getelementbyid ("Upload-area"); //2, through HTML5 drag events, OnDrop, and then by dragging the area to monitor the browser drop event to achieve the purpose of file uploadUploadarea.addeventlistener ("Drop", Function (e) {e.preventdefault (); //3. Get the file information dragged to the browser from event eventsvar filelist=E.datatransfer.files;  for(Var i=0;i<filelist.length;i++){                      //You can only upload pictures here                    if(Filelist[i].type.indexof ("image")!=0) {alert ("Please upload pictures"); return; }                      //Picture Preview This step needs to be judged by what browser you judge yourself.                    /*************************************/IMG1=window.                      Url.createobjecturl (Filelist[i]); /*************************************/var str= "<div><p> "+filelist[i].name+" </p></div> "; document.getElementById ("Preview"). InnerHTML + =str; var fileName=Filelist[i].name;                      Console.info (FileName); var fileSize=filelist[i].size;                      Console.info (fileSize); //4. Uploading files to the server via XMLHttpRequest is an AJAX requestvar xhr=NewXMLHttpRequest (); //5, here must first write a data.jsp upload file, of course, you write a servlet or action canXhr.open ("Post", "data.jsp",true); Xhr.setrequestheader ("X-request-width", "XMLHttpRequest"); //6, through the HTML5 formdata dynamic set table cell elementvar formdata=NewFormData ();//dynamically assigns a value to a form, passing a binary file//In fact, it is equivalent to <input type= "file" name= "file"/>Formdata.append ("Doc", Filelist[i]);                  Xhr.send (FormData);          }              }); }          //Call directlytm_upload (); </script> 
OK, after writing the foreground code, in the background, as follows:
<% @pageImport= "Java.util.UUID"%> <% @pageImport= "Org.apache.commons.fileupload.FileItem"%> <% @pageImport= "Java.util.Iterator"%> <% @pageImport= "Java.util.List"%> <% @pageImport= "Org.apache.commons.fileupload.servlet.ServletFileUpload"%> <% @pageImport= "Org.apache.commons.fileupload.disk.DiskFileItemFactory"%> <% @pageImport= "Org.apache.commons.fileupload.FileItemFactory"%> <% @pageImport= "Java.io.File"%> <%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding= "UTF-8"%> <%/*1, File upload:*/request.setcharacterencoding ("Utf-8"); Response.setcharacterencoding ("Utf-8"); //Get file pathString Strpath=request.getrealpath ("/") + "/upload"; File File=NewFile (strpath); if(!file.exists ()) file.mkdirs (); Fileitemfactory Factory=Newdiskfileitemfactory (); Servletfileupload Upload=Newservletfileupload (Factory); //getting file information from the request objectList items=upload.parserequest (Request); if(items!=NULL){           for(intI=0;i<items.size (); i++) {Iterator Iterator=Items.iterator ();  while(Iterator.hasnext ()) {Fileitem Item=(Fileitem) iterator.next (); if(Item.isformfield ()) {Continue; }Else{String FileName=Item.getname (); Long fileSize=item.getsize (); intPos=filename.indexof ("."); String ext=filename.substring (Pos,filename.length ()); FileName=uuid.randomuuid (). toString () +ext; File SaveFile=NewFile (strpath,filename);               Item.write (SaveFile); }              }          }      }       %>
OK, at this point, the completion of the drag-and-drop upload function, of course, this is only a rough version, I have optimized the code for the plug-in can be used directly!!
Java implementation drag-and-drop upload