这是主页面
<%@ 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"> <html> <head> <base href="<%=basePath%>"> <title>HTML5文件拖动上传</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <style type="text/css"> .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> </head> <body> <div style="margin: 20px 400px"> <div class="up" id="upflies">将文件拖拽到此处上传</div> <div class="ne" id="content1"></div> </div> <script type="text/javascript"> //1:文件上传html5 //知识点：drag 把文件拖拽到浏览器的默认行为是下载或打开 document.ondragleave = function(e) { e.preventDefault(); //拖动元素离开的事件 }; document.ondrop = function(e) { e.preventDefault(); //文件拖放松开以后的事件 }; document.ondragover = function(e) { e.preventDefault(); }; function tm_upload() { //2:通过html5拖拽事件，ondrop,然后通过拖动区域监听浏览器的drop事件达到文件上传的目的 var uploadArea = document.getElementById("upflies"); //监听文件上传区域的文件松开事件 uploadArea.addEventListener("drop", function(e) { e.preventDefault(); //3:从事件event中获取拖拽到浏览器的文件信息 //获取事件的文件列表信息 var fileList = e.dataTransfer.files; var length = fileList.length; for(var i=0;i<length;i++) { //alert(fileList[i].type); //显示上传文件的类型 //获得图片流 var img = window.webkitURL.createObjectURL(fileList[i]); //火狐不支持！ //获取文件名称 var fileName = fileList[i].name; //获取文件的大小 var fileSize = fileList[i].size; var str = "<div><img src=‘"+img+"‘ height=‘20%x‘ width=‘20%‘ /><p>文件名称："+fileName+"</p><p>大小："+fileSize+"<p/></div>" document.getElementById("content1").innerHTML +=str; //4:通过XMLHttpRequest上传文件到服务器 var xhr = new XMLHttpRequest(); xhr.open("post", "data.jsp",true); //代表异步提交，false表示非异步 //判断是不是一个ajax xhr.setRequestHeader("X-Requested-with", "XMLHttpRequest"); //5:通过HTML5 FormData动态设置表单元素 var formdata = new FormData(); //动态给表单赋值，传递二进制文件 //6:获取服务器上的文件信息 formdata.append("doc",fileList[i]); //7:编写data.jsp上传页面 xhr.send(formdata); } }); } tm_upload(); </script> </body> </html>
- - -- - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - -- - -- - - - - - - - - -
data.jsp 这里是处理页面
<%@page import="java.io.File"%> <%@page import="org.apache.commons.fileupload.FileItem"%> <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%> <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%> <%@page import="org.apache.commons.fileupload.FileItemFactory"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% /* 1:文件上传jar包 2:创建服务器目录 upload 3:从request对象获取我们ajax传输的文件信息 4:将客户端传递过来的文件上传到 upload目录下 a:一定要对文件重命名？，文件不支持中文 */ //设置编码 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); //获取服务器的根目录 String rootPath = request.getRealPath("/"); System.out.println("服务器路径："+rootPath); String uploadPath = rootPath+"/upload"; File file = new File(uploadPath); //自动创建目录 if(!file.exists()){file.mkdirs();} //判断是否存在这个文件夹 //创建一个文件对象工厂 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); //从请求对象中获取文件信息 List items = upload.parseRequest(request); if (items!=null) { Iterator iterator =items.iterator(); while (iterator.hasNext()) { FileItem item = (FileItem)iterator.next(); //判断是否为表单里提交上来的 if (item.isFormField()){ continue; }else{ String fileName = item.getName(); long size = item.getSize(); System.out.println(fileName+" - - - "+size); //文件上传到服务器 int pos = fileName.lastIndexOf("."); //获取文件后缀 String ext = fileName.substring(pos,fileName.length()); fileName = UUID.randomUUID().toString()+ext; File saveFile = new File(uploadPath,fileName); //上传 item.write(saveFile); } } } %>
Commons-FileupLoad.jar 下载：http://pan.baidu.com/s/1o6FpGHc
原文：http://www.cnblogs.com/daidai-99/p/4442704.html