html5学习(文件拖拽上传)

淩亂°似流年 2022-12-31 02:25 145阅读 0赞

> **html5文件拖拽上传,有图有代码！**

**文件拖拽**的核心代码不多，如下可做参考：

divNode.ondrop = function(e) {
    	e.preventDefault();
    	var myData = e.dataTransfer;
    	console.log("*****", myData);	
    	console.log("#####", myData.files, myData.files[0]);
    	console.log("=====", myData.files[0].name, myData.files[0].type);
    	console.log("-----", myData.files[0].size);
    	
    	var form_Data = new FormData();
    	//获得拖拽的文件数据
    	var drag_Data = myData.files[0];
    	form_Data.append("up_file", drag_Data);
    	
    	imgNode.style.display = "";
    	pNode.innerHTML = drag_Data.name;
    	
    	//ajax上传文件
    	var xhr = new XMLHttpRequest();
    	//url是一个Servlet(提交到后台的Servlet中处理)
    	var url = 'http://127.0.0.1:8888/ajax/ajaxUpload2';
    	xhr.open('post', url, true);
    	xhr.send(form_Data);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

**完整源代码如下：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(文件拖拽上传)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    <style type="text/css">
    .div1 {
    	width: 300px;
    	height: 150px;
    	/*height和line-height设置一样高,使得div里的文字是垂直居中*/
    	line-height: 150px;
    	text-align:center;  /*设置div里的内容水平居中*/
    	border: 3px dashed blue;
    	color: red;
    	font-size: 18px;
    	background-color: #eee366;
    }
    </style>
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(文件拖拽上传)</h3>
    <div id="uploadBox" class="div1">
    拖入文件并上传！
    </div>
    <img id="promptImg" src="../img/dragFile.jpg" style="width: 60px;height: 60px;display: none;">
    <p id="drag_fileName"></p>
    </body>
    <script type="text/javascript">
    var divNode = document.getElementById("uploadBox");
    var pNode = document.getElementById("drag_fileName");
    var imgNode = document.getElementById("promptImg");
    
    divNode.ondragenter = function(e) {
    	e.preventDefault();
    	divNode.innerHTML = "***进入拖放区***";	
    }
    
    divNode.ondragover = function(e) {
    	e.preventDefault();
    	divNode.innerHTML = "***在拖放区移动***";	
    }
    
    divNode.ondragleave = function(e) {
    	e.preventDefault();
    	divNode.innerHTML = "***离开了拖放区了***";	
    }
    
    divNode.ondrop = function(e) {
    	e.preventDefault();
    	var myData = e.dataTransfer;
    	console.log("*****", myData);	
    	console.log("#####", myData.files, myData.files[0]);
    	console.log("=====", myData.files[0].name, myData.files[0].type);
    	console.log("-----", myData.files[0].size);
    	
    	var form_Data = new FormData();
    	//获得拖拽的文件数据
    	var drag_Data = myData.files[0];
    	form_Data.append("up_file", drag_Data);
    	
    	imgNode.style.display = "";
    	pNode.innerHTML = drag_Data.name;
    	
    	//ajax上传文件
    	var xhr = new XMLHttpRequest();
    	//url是一个Servlet(提交到后台的Servlet中处理)
    	var url = 'http://127.0.0.1:8888/ajax/ajaxUpload2';
    	xhr.open('post', url, true);
    	xhr.send(form_Data);
    }
    </script>
    </html>

**以下是处理文件上传的Servlet类**

package com.jiongmeng.ajax;
    
    import java.io.File;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Iterator;
    import java.util.List;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    
    
    /**
     * 测试ajax上传文件
     * @param <StandardMultipartHttpServletRequest>
     */
    @WebServlet("/ajaxUpload2")
    public class upload2<StandardMultipartHttpServletRequest> extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest req, HttpServletResponse res)
    			throws ServletException, IOException {
    		req.setCharacterEncoding("UTF-8");
    		res.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = res.getWriter();  
            try{  
                DiskFileItemFactory diskFactory = new DiskFileItemFactory();  
                // threshold 极限、临界值，即硬盘缓存 1M  
                diskFactory.setSizeThreshold(4 * 1024);  
                // repository 贮藏室，即临时文件目录  
                diskFactory.setRepository(new File("temp"));  
              
                ServletFileUpload upload = new ServletFileUpload(diskFactory);  
                // 设置允许上传的最大文件大小 4M  
    //            upload.setSizeMax(4 * 1024 * 1024);  
                // 解析HTTP请求消息头  
                List fileItems = upload.parseRequest(req);  
                Iterator iter = fileItems.iterator();  
                while(iter.hasNext())  
                {  
                    FileItem item = (FileItem)iter.next();  
                    if(item.isFormField())  
                    {  
                        System.out.println("处理表单内容 ......");  
                        processFormField(item, pw);  
                    }else{  
                        System.out.println("处理上传的文件 ......");  
                        processUploadFile(item, pw);  
                    }  
                }// end while()  
     
                pw.close();  
            }catch(Exception e){  
                System.out.println("使用 fileupload 包时发生异常 ......");  
                e.printStackTrace();  
            }
    	}
    
    	
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    	
    	private void processFormField(FileItem item, PrintWriter pw)  
    	        throws Exception  
    	    {  
    	        String name = item.getFieldName();  
    	        String value = item.getString();          
    	        pw.println(name + " : " + value + "\r\n");  
    	    }  
    	
    	private void processUploadFile(FileItem item, PrintWriter pw)  
    	        throws Exception  
    	    {  
    	        // 此时的文件名包含了完整的路径，得注意加工一下  
    	        String filename = item.getName();         
    	        System.out.println("完整的文件名：" + filename);  
    	        int index = filename.lastIndexOf("\\");  
    	        filename = filename.substring(index + 1, filename.length());  
    	 
    	        long fileSize = item.getSize();  
    	 
    	        if("".equals(filename) && fileSize == 0)  
    	        {             
    	            System.out.println("文件名为空 ...");  
    	            return;  
    	        }  
    	 
    	        File uploadFile = new File("G:/workspace2016-04-03/ajax/uploadFile" + "/" + filename);  
    	        item.write(uploadFile);  
    	        pw.println(filename + " 文件保存完毕 ...");  
    	        pw.println("文件大小为 ：" + fileSize + "\r\n");  
    	    }  
    	
    }

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/667783ecdda24cfeb4a8fcf291a9fafe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/7071253da1464ff592917e710335b84b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221120/c53d7a39ce734fe4b6f15b7d37f6d423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221120/3e097ecf89454ab39e617a4e3ec3faad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221120/8dfd6880896a49c499ff53a2e580baaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221120/474b5ecdfc244845a51407ceb5e68148.png