日期:2014-05-17  浏览次数:20550 次

html5 文件拖拽上传

?

本文首先发表在? 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266

?

html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来。

?

功能实现

下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须的基础。

?

拖拽事件

拖拽事件有下面这些:

  • dragstart:当用户开始拖动对象时触发。

  • dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许drop,或者监听者不执行任何操作,那么drop默认是不允许的。

  • dragover:当鼠标经过一个元素时,且有拖动发生时触发 。

  • dragleave:当鼠标离开一个元素,且有拖动在发生时触发。

  • drag: 当对象被拖动,每次移动鼠标时触发。

  • drop:在drag操作的最后发生drop时,在元素上触发此事件。监听者应该负责检索拖动的数据,并插入drop的位置。

  • dragend: 在拖动对象时放开鼠标按键时触发。

从浏览器外拖拽文件到浏览器时,必须要绑定的事件有 dragoverdrop,其他的都可以不绑定。dragoverdrop 事件的处理函数内必须调用事件的 preventDefault() 函数,要不然浏览器会进行默认处理,比如文本类型的文件直接打开,非文本的可能弹出一个下载文件框。

?

DataTransfer对象

拖拽对象用来传递数据的媒介,通过拖拽事件的 event.dataTransfer 获取。

  • dataTransfer.dropEffect [ = value ]:返回当前选择的操作类型,可以设置新的值来修改已选择的操作。可选的值有: none, copy, link, move

  • dataTransfer.effectAllowed [ = value ]:返回允许的操作类型,可修改。可选的值有:none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized

  • dataTransfer.types:返回一个DOMString,列出在dragstart事件里设置的所有格式。另外,如果有文件被拖动,那么其中一个类型的字符串将是“Files”。

  • dataTransfer.clearData( [ format ] ):移除指定格式的数据。如果忽略参数则移除所有数据。

  • dataTransfer.setData(format, data):添加指定的数据。

  • data = dataTransfer.getData(format):返回指定的数据。如果没有这样的数据,则返回空字符串。

  • dataTransfer.files:返回被拖拽的FileList,如果有。

  • dataTransfer.setDragImage(element, x, y):用指定的元素来更新drag反馈,替换之前指定的反馈(feedback)。

  • dataTransfer.addElement(element):添加指定元素到用于渲染drag反馈的元素列表。

在这个用例里,最重要的就是 dataTransfer.files 属性,它是用户拖拽进浏览器的文件列表,是个 FileList 对象,有 length 属性,可以通过下标访问。

?

FormData

FormData 代表一个表单,可以通过 append('fieldName', value) 函数往表单里添加参数,参数的只不仅可以是字符串,还可以是File对象,甚至二进制数据。

?

XMLHttpRequest level 2

新版本的XMLHttpRequest对象,这里说的XMLHttpRequest都是指新版的。

XMLHttpRequest可以向不同域名的服务器发出HTTP请求。这叫做 “跨域资源共享”(Cross-origin resource sharing,简称CORS)。

?

浏览器有个著名的同源策略,这里浏览器安全的基础,CORS 除了需要浏览器支持外,还要服务器同意。

XMLHttpRequest 支持直接发送FormData,就像浏览器进行表单提交一样。

?

XMLHttpRequest 还支持进度信息(progress事件),进度分为上传进度和下载进度,上传进度的事件是在 XMLHttpRequest.upload 对象上,下载进度的事件是在 XMLHttpRequest 对象。每个进度事件都有三个属性:

  • lengthComputable:可计算的已上传字节 数
  • total:总的字节 数
  • loaded:到目前为止上传的字节 数

除了进度事件,还支持下面五个事件:

  • load事件:传输成功完成。
  • abort事件:传输被用户取消。
  • error事件:传输中出现错误。
  • loadstart事件:传输开始。
  • loadend事件:传输结束,但是不知道成功还是失败。

progress事件一样,属于上传操作的事件处理函数绑定在XMLHttpRequest.upload对象上,属性下载的直接绑定在 XMLHttpRequest 对象。

?

具体代码

本机测试时要注意把下面代码里的路径改为自己本机的。

?

服务器端

服务器端需要写个Servlet来接收上传的表单。 /html5/FileUploadServlet

用servlet3的 @MultipartConfig 注解就可以很快实现。

?

客户端代码


<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
       <div id= "progressBarZone">请将文件拖拽进浏览器内! <br/></ div>
</body>

<script>
var progressBarZon