使用AJAX实现文件拖拽上传功能详解

概述

对于微云、百度云等网盘提供的文件存储服务而言，文件上传是一个重要功能。文件上传的方式主要有两种：二进制数据上传、表单上传。本文会详细解析表单上传的协议规范，前端上传文件的两种方式：对话框选择方式、拖拽选择方式，服务端接收上传的文件以及文件上传功能的技巧等。

表单上传协议详解

RFC1867(https://www.ietf.org/rfc/rfc1867.txt) 规范了表单上传的协议格式。下面给出一个例子，用Fiddler抓包工具，抓取同时上传两个字符串内容和一个文本文件的HTTP请求，获取的请求内容如下：

POST http://localhost:8080/Server/uploadfile HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 391
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuA8AsEvrgV5BUqe5
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8

------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file1"

value1
------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file2"; filename="test2.txt"
Content-Type: text/plain

hello world
------WebKitFormBoundaryuA8AsEvrgV5BUqe5
Content-Disposition: form-data; name="file3"

value3
------WebKitFormBoundaryuA8AsEvrgV5BUqe5--

根据HTTP协议规范，每个请求头后面都需要追加回车和换行符(\r\n)。消息头和消息体之间也需要插入回车和换行符，忽略其它的请求头部，表单上传的格式可简化成如下代码，方便描述。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
回车换行
------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file2"; filename="test2.txt"回车换行
Content-Type: text/plain回车换行
回车换行
hello world回车换行
------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file3"回车换行
回车换行
value3回车换行
------WebKitFormBoundaryuA8AsEvrgV5BUqe5--回车换行

1.添加表单描述头部

使用表单上传功能，需要在头部添加如下代码，其中“multipart/form-data”表示请求上传的内容类型为表单，“boundary”表示分隔符，用于分割表单里面的每项内容。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行

2.添加表单内容

表单中每项内容的类型无外乎就两种，一种是文本类型，另外一种是文件类型。每项内容之间需要用“–+boundary+回车换行”进行分割，紧接着分隔符的代码用于描述内容配置。其中文本类型的内容需要添加如下格式的代码:

------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file3"回车换行
回车换行
value3回车换行

“name”用于描述表单的字段名称，两个回车换行之后就是这个字段的值。文件类型的内容跟文本类型对比多了两个字段，“filename”用于描述上传的文件的名称，“Content-Type”用于描述上传的文件类型（文件的MIME），文件类型的内容需要添加如下格式的代码:

------WebKitFormBoundaryuA8AsEvrgV5BUqe5回车换行
Content-Disposition: form-data; name="file2"; filename="test2.txt"回车换行
Content-Type: text/plain回车换行
回车换行
hello world回车换行

添加完表单的每项内容之后，需要在后面追加“–+boundary+–+回车换行”，完成表单内容的拼接。

前端选择文件上传的两种方式

1.对话框选择方式上传

实现对话框选择文件，会用到如下代码:

<form action="http://localhost:8080/Server/uploadfile" method="post" enctype="multipart/form-data">
<br> 文件:
<input type="file" name="image">
<br>
<input type="submit" value="上传">
</form>

其中action字段为文件上传的接口地址,enctype需要定义为“multipart/form-data”、input标签的type属性的值为“file”，对应的name为表单的字段名称。

2.拖拽选择方式上传

要实现这个功能，可借助Html5新增的“Drag and drop”功能。W3C官方文档为:https://www.w3.org/TR/2014/CR-html5-20140731/editing.html。 利用它，我们可以知道文件何时被拖动到目标区域、文件何时离开目标区域、有哪些文件被拖到了目标区域。接下来就具体聊聊“Drag and drop”功能。

如何知道文件何时拖动到目标区域又何时离开目标区域？

HTML中的每个标签都能够设置跟拖动相关的事件，拖动事件的回调函数解释如下：

事件	描述
ondragstart	拖动操作开始时调用（部分浏览器不回调此方法）
ondrag	拖动过程中调用(部分浏览器不回调此方法)
ondragenter	刚拖动到目标元素区域时调用
ondragover	在目标元素区域内拖动时调用,此方法会隔一段时间调用一次
ondragleave	拖动离开目标元素区域时调用
ondragend	拖动结束时回调(部分浏览器不回调此方法)
ondrop	在目标元素区域内放开拖动内容时调用

注册事件可以使用如下代码：

//element可以为HTML标签、document
element.ondragstart = function(ev) {
console.log('ondragstart');
}

注意:

浏览器默认在拖放完成时会打开所拖放的文件，正确的做法是要调用事件对象的preventDefault方法用来阻止事件的默认动作的执行。

//element可以为HTML标签、document
element.ondragover = function(ev) {
ev.preventDefault();
//do something
}

如何获取拖动的文件？

上面所列举的回调函数，每个回调函数里面都有一个参数DragEvent，DragEvent的接口定义语言描述如下:

interface DragEvent : MouseEvent {
readonly attribute DataTransfer? dataTransfer;
};

可以看到拖动事件接口继承于鼠标事件接口，其中有个属性dataTransfer（数据传输者）用于传输拖动的内容，DataTransfer的接口定义语言如下：

interface DataTransfer {
attribute DOMString dropEffect;
attribute DOMString effectAllowed;

readonly attribute DataTransferItemList items;

void setDragImage(Element image, long x, long y);

/* old interface */
readonly attribute DOMString[] types;
DOMString getData(DOMString format);
void setData(DOMString format, DOMString data);
void clearData(optional DOMString format);
readonly attribute FileList files;
};

其中的setData方法用于设置要传输的内容，getData方法用于获取传输的内容。当要实现从一个元素中拖动内容到另外一个元素区域时可以使用者两个方法。拖动文件时值需要使用files属性，其值被浏览器设置进去了，因此只要获取即可。那么获取files的最佳时机是什么时候，当然是在ondrop方法回调时最佳。

dz.ondrop = function(ev) {
//阻止浏览器默认打开文件的操作
ev.preventDefault();
//表单上传文件...

}

如何上传获取到的文件?

使用AJAX即可通过表单方式上传文件，附上前端拖拽上传的完整代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
<title>HTML5拖拽上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
#dropzone {
width: 300px;
height: 300px;
border: 2px dashed gray;
}

#dropzone.over {
width: 300px;
height: 300px;
border: 2px dashed red;
}
</style>
</head>

<body>
<div id="dropzone" dropEffect="link"></div>
</body>
<script type="text/javascript">
function uploadFile(formData) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/Server/uploadfile', true);
xhr.send(formData);
}
var dz = document.getElementById('dropzone');
dz.ondragover = function(ev) {
//阻止浏览器默认打开文件的操作
ev.preventDefault();
this.className = 'over';
}

dz.ondragleave = function() {
this.className = '';
}

dz.ondrop = function(ev) {
this.className = '';
//阻止浏览器默认打开文件的操作
ev.preventDefault();
//表单上传文件
var formData = new FormData();
formData.append('file', ev.dataTransfer.files[0]);
uploadFile(formData);
}
</script>

</html>

服务端处理上传的文件

服务端代码本人采用JAVAEE开发，文件上传使用到commons fileupload组件:https://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi，commons fileupload依赖common io库。

完整代码如下：

package com.servlet;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletContext;
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.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

@WebServlet(name = "uploadfile", urlPatterns = "/uploadfile")
public class UploadFileServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

try {
ServletContext servletContext = this.getServletConfig()
.getServletContext();
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Set factory constraints
String path = "D:\\upload";
File uploadDir = new File(path);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
factory.setRepository(new File(uploadDir.getAbsolutePath()));
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// Set overall request size constraint
upload.setSizeMax(-1);
// Parse the request
List<FileItem> items = upload.parseRequest(req);
// Process the uploaded items
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = iter.next();
if (item.isFormField()) {
// 普通表单数据
} else {
// 文件表单数据
item.write(new File(uploadDir.getAbsolutePath()
+ File.separator + item.getName()));
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}

文件上传功能的一些技巧

1.实现文件秒传功能

微云、百度云就含有文件秒传功能，其实现原理其实很简单，文件可以用其MD5来区分差异性。上传文件时计算文件的MD5，只要服务器上存在相同MD5值的文件，则不会真正的上传文件，而是把网盘上文件的索引存储到当前用户信息中。所以一般网盘上不会出现MD5值相同的文件。

2.防止可执行文件注入攻击

以tomcat服务器为例，WEB-INF目录可以被浏览器访问。如果用户将可执行的文件如xx.jsp上传到这个目录，里面编写了删除文件目录的代码，则当浏览器访问这个xx.jsp文件时，这段恶意代码就会被执行，这显然是恶意攻击。为了阻止这种行为，正确的做法是过滤掉可执行文件，不让其上传，这种判断前端和后端都需要做，前端做的目的是可以减轻服务端的判断压力，后端做是为了阻止模拟的HTTP请求上传恶意文件。

更多

长按下图->识别图中二维码或者扫一扫关注我的公众号。