Home >Java >javaTutorial >Java implements drag and drop upload

Java implements drag and drop upload

大家讲道理Original: 2016-11-11 10:48:541732browse

效果图

jsp上传前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title></title>  
<style type="text/css">  
* {  
    padding: 0px;  
    margin: 0px;  
}  
   
body {  
    background: #394E48;  
    font-size: 14px;  
    font-family: "微软雅黑";  
}  
   
.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>  
</head>  
<body>  
    <h1 class="title">小夜的传说最新力作！Java实现拖拽上传！！</h1>  
     <div class="demo">  
        <div class="drag-area" id="upload-area">  
            将图片拖拽到这里  
        </div>  
        <!-- 图片预览 -->  
        <div id="preview" class="preview"></div>  
     </div>  
</body>  
<script type="text/javascript">  
    //1、文件上传HTML5 通过drag把文件拖拽到浏览器的默认事件覆盖  
    //文件离开  
    document.ondragleave=function(e){  
    e.preventDefault();  
        console.info("文件离开执行了我！！");  
    };  
    //鼠标松开文件  
    document.ondrop=function(e){  
    e.preventDefault();  
        console.info("松开以后执行了我！");  
    };  
    //鼠标移动文件  
    document.ondragover=function(e){  
    e.preventDefault();  
        console.info("文件移动以后执行了我！");  
    };  
       
    function tm_upload(){  
        var img1="";  
        var uploadArea=document.getElementById("upload-area");  
        //2、通过HTML5拖拽事件，ondrop，然后通过拖动区域监听浏览器的drop事件达到文件上传的目的  
        uploadArea.addEventListener("drop", function(e){  
            e.preventDefault();  
            //3、从事件event中获取拖拽到浏览器的文件信息  
            var fileList=e.dataTransfer.files;  
            for(var i=0;i<fileList.length;i++){  
                //此处判断只能上传图片  
                if(fileList[i].type.indexOf("image")!=0){  
                    alert("请上传图片");  
                    return;               
                }  
                //图片预览  这一步需要判断是什么浏览器  大家自己判断吧  
                /*************************************/ 
                img1=window.URL.createObjectURL(fileList[i]);  
                /*************************************/ 
                var str="<div><img  src=&#39;"+img1+"&#39;/ alt="Java implements drag and drop upload" ><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、通过XMLHttpRequest上传文件到服务器  就是一个ajax请求  
                var xhr=new XMLHttpRequest();  
                //5、这里需要先写好一个data.jsp的上传文件，当然，你写成servlet或者是action都可以  
                xhr.open("post","data.jsp",true);  
                xhr.setRequestHeader("X-Request-Width", "XMLHttpRequest");  
                //6、通过HTML5 FormData动态设置表单元素  
                var formData=new FormData();//动态给表单赋值，传递二进制文件  
                //其实就相当于<input type="file" name="file"/>  
                formData.append("doc",fileList[i]);  
                xhr.send(formData);  
            }  
        });  
    }  
    //直接调用  
    tm_upload();  
</script>  
</html>

ok，编写完前台代码，在写后台，如下:

<%@page import="java.util.UUID"%>  
<%@page import="org.apache.commons.fileupload.FileItem"%>  
<%@page import="java.util.Iterator"%>  
<%@page import="java.util.List"%>  
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>  
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>  
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>  
<%@page import="java.io.File"%>  
<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%>  
<%  
/*  
1、文件上传:  
   
*/ 
request.setCharacterEncoding("utf-8");  
response.setCharacterEncoding("utf-8");  
//获取文件路径  
String strPath=request.getRealPath("/")+"/upload";  
File file =new File(strPath);  
if(!file.exists())file.mkdirs();  
FileItemFactory factory=new DiskFileItemFactory();  
ServletFileUpload upload=new ServletFileUpload(factory);  
//从请求对象中获取文件信息  
List items= upload.parseRequest(request);  
if(items!=null){  
    for(int i=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();  
            int pos=fileName.indexOf(".");  
            String ext=fileName.substring(pos,fileName.length());     
            fileName=UUID.randomUUID().toString()+ext;  
            File saveFile=new File(strPath,fileName);  
            item.write(saveFile);  
         }  
        }  
    }  
}  
 %>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Android applet used to check network and network speedNext article：Android applet used to check network and network speed

See more

Java implements drag and drop upload

Related articles