Java implementation HTML5 Drag-and-drop file upload

This is the main page.

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><%String Path=Request.getcontextpath (); String BasePath= Request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >. up {width:600px; height:100px; border:1px solid; Text-align:center; line-height:100px; color: #72FD31;                }. NE {width:600px; height:400px; border:1px solid; Margin-top:20px}</style> //1: File upload HTML5                        //Knowledge Point: Drag the default behavior of dragging files to a browser is to download or openDocument.ondragleave =function(e) {e.preventdefault (); //drag an element away from the event            }; Document.ondrop=function(e) {e.preventdefault (); //file Drag-and-drop event after opening            }; Document.ondragover=function(e) {e.preventdefault ();                        }; functiontm_upload () {//2: Drag the event through HTML5, OnDrop, and then by dragging the area to monitor the browser's drop event to achieve the purpose of file upload                varUploadarea = document.getElementById ("Upflies"); //listen for files in the File Upload Area release eventUploadarea.addeventlistener ("Drop",function(e) {e.preventdefault (); //3: Get the file information dragged to the browser from event events                    //Get file list information for an event                    varFileList =E.datatransfer.files; varLength =filelist.length;  for(vari=0;i<length;i++) {                        //alert (Filelist[i].type); Displays the type of upload file                        //Get Picture Stream                        varimg = Window.webkitURL.createObjectURL (filelist[i]);//Firefox does not support!                         //Get file name                        varFileName =Filelist[i].name; //get the size of a file                        varFileSize =filelist[i].size; varstr = "<div><p> file name: "+filename+" </p><p> Size: "+filesize+" <p/></div> "document.getElementById ("Content1"). InnerHTML + =str; //4: Uploading files to the server via XMLHttpRequest                        varXHR =NewXMLHttpRequest (); Xhr.open ("Post", "data.jsp",true);//represents asynchronous Commit, false indicates non-asynchronous                        //Judging is not an AjaxXhr.setrequestheader ("X-requested-with", "XMLHttpRequest"); //5: Dynamic setting of table cells via HTML5 Formdata                        varFormdata =NewFormData ();//dynamically assigns a value to a form, passing a binary file                        //6: Get the file information on the serverFormdata.append ("Doc", Filelist[i]); //7: Write data.jsp upload pagexhr.send (Formdata);            }                                    });                    } tm_upload (); </script> </body>
- - -- - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - -- - -- - - - - - - - - -
data.jsp here is the processing page

<% @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"%><%@ page language= "Java"Import= "java.util.*" pageencoding= "UTF-8"%><%/*1: File Upload jar Package 2: Create server directory upload 3: Get the file information of our AJAX transfer from Request object 4: Upload the file passed by the client to the upload directory. A: Be sure to rename the file? , the file does not support Chinese*/        //Set EncodingRequest.setcharacterencoding ("UTF-8"); Response.setcharacterencoding ("UTF-8"); //get the root directory of the serverString RootPath = Request.getrealpath ("/"); System.out.println ("Server path:" +RootPath); String Uploadpath= rootpath+ "/upload"; File File=NewFile (Uploadpath); //automatically create a table of contents    if(!file.exists ()) {File.mkdirs ();}//determine if this folder exists//Create a File object factoryFileitemfactory factory =Newdiskfileitemfactory (); Servletfileupload Upload=Newservletfileupload (Factory); //getting file information from the request objectList items =upload.parserequest (Request); if(items!=NULL) {Iterator Iterator=Items.iterator ();  while(Iterator.hasnext ()) {Fileitem Item=(Fileitem) iterator.next (); //determine whether the table dropdowns is submitted            if(Item.isformfield ()) {Continue; }Else{String FileName=Item.getname (); LongSize =item.getsize (); System.out.println (FileName+" - - - "+size); //uploading files to the server                intpos = Filename.lastindexof (".")); //get file suffixString ext =filename.substring (Pos,filename.length ()); FileName= Uuid.randomuuid (). toString () +ext; File SaveFile=NewFile (uploadpath,filename); //UploadItem.write (SaveFile); }        }    }    %>

Commons-fileupload.jar Download: http://pan.baidu.com/s/1o6FpGHc

Java implementation HTML5 Drag-and-drop file upload