Java实现HTML5拖拽文件上传

这是主页面

<%@ 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

 

 

 

你可能感兴趣的:(java实现)