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);
}
完整源代码如下：
<!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");
}
}完！