web前端|H5教程
html5，文件拖拽
web前端-H5教程
follow集first集源码,vscode复制路径用反斜杠,ubuntu配置时区,内嵌tomcat如何运行,爬虫框架 python,韩顺平php教学视频,黄石低成本seo推广公司排名lzw
20秒试看源码 app制作,vscode照片如何拉满,ubuntu关闭xser,tomcat打开日志文件,pro imdb 爬虫,php 打印类方法,阳泉seo优化参考价,网站模板源码在哪里,dedecms 注册页面模板lzw
html5 文件拖拽上传是个老话题了，网上有很多例子，我一开始的代码也是网上找来改的，只是踩了几个坑之后就想把过程记录下来。
仓储管理系统源码,vscode键盘音,ubuntu ziti,卸载tomcat 服务,sqlite 建数据库,wp网站微信整合插件,前端ui框架全部加载的区别,哥斯拉和骷髅爬虫谁更强,虚拟机php,许昌seo优化地址,手机网页看视频网站有哪些,js网页视频播放器插件下载,css animation 模板lzw
功能实现
下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须的基础。
拖拽事件
拖拽事件有下面这些：
dragstart：当用户开始拖动对象时触发。
dragenter： 当鼠标第一次经过目标元素，且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许drop，或者监听者不执行任何操作，那么drop默认是不允许的。
dragover：当鼠标经过一个元素时，且有拖动发生时触发 。
dragleave：当鼠标离开一个元素，且有拖动在发生时触发。
drag： 当对象被拖动，每次移动鼠标时触发。
drop：在drag操作的最后发生drop时，在元素上触发此事件。监听者应该负责检索拖动的数据，并插入drop的位置。
dragend： 在拖动对象时放开鼠标按键时触发。
从浏览器外拖拽文件到浏览器时，必须要绑定的事件有dragover和drop，其他的都可以不绑定。dragover和drop事件的处理函数内必须调用事件的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 注解就可以很快实现。
客户端代码
如果上面的代码都部署在同一个网站下，那是没有问题的。可是我要做的上传操作是要把文件传到另一个网站上，坑也就产生了。
