html5学习(文件拖拽上传) 淩亂°似流年 2022-12-31 02:25 103阅读 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
还没有评论,来说两句吧...