HTML5拖拽上传简单效果

简单的HTML5拖拽上传

注：不考虑低版本浏览器支持情况，最好在Chrome/FF/IE10+测试。

参考资料： 点击

一、简单而又原始的Servlet（Web3.0）

@WebServlet(description = "html5拖拽上传处理", urlPatterns = { "/DragUploadServlet" })
public class DragUploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		if(ServletFileUpload.isMultipartContent(request)){
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(factory);
			Iterator items;
			try{
				items = upload.parseRequest(request).iterator();
				while(items.hasNext()){
					FileItem item = (FileItem)items.next();
					if(!item.isFormField()){
						String name = item.getName();
						String fileName = name.substring(name.lastIndexOf("\\")+1);
						String path  =request.getServletContext().getRealPath("/") + File.separatorChar + fileName;
						System.out.println(path);
						item.write(new File(path));
						System.out.println("文件保存地址："+path);
						pw.write("文件保存地址："+path);
					}else{
						System.out.println("Form Field！");
					}
				}
			}catch(Exception e){
				e.printStackTrace(pw);
			}
		}
		pw.write("upload complete");
		pw.close();
	}
 }

其中用到了jar包：commons-fileupload-1.2.1.jar和commons-io.1.4.jar

因此，我本地部署在tomcat上映射的地址为:localhost:8080/{项目根路径}/DragUploadServlet。

二、WebContent下前端页面index.html

    
    
    


    

    	将文件拖拽到此处开始上传！
    

 
   
//进度事件监听没出来，暂时没找出原因