说米网

这篇文章首要介绍了HTML5拖拽文件上传的示例代码,文中经过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参阅学习价值，需要的朋友们下面随着小编来一同学习学习吧

上传文件

HTML5新增了文件API,提供客户端本地操作文件的或许.

咱们能够经过file表单或拖放操作挑选文件,还能够经过JavaScript读取文件的称号、巨细、类型、和修改时刻.

file类型的input表单新增了files特点,保存咱们上传(网络文件服务器)文件的信息,假如要实现多文件上传,能够设置input的multiple特点.

能够运用accept特点规定文件上传的MIME类型 例如’image/jpeg’

页面拖拽操作

关于被拖拽的元素,HTML5增加了三个事情用于监听拖拽的进程

dragstart 拖拽开端

drag 正在拖拽

dragend 拖拽完毕

想要拖拽元素,必须设置draggable特点

页面默许的动作是拖拽后回到原位

在拖动阶段，咱们能够存储被拖动元素的特点或者状况到事情目标的dataTransfer中，假如出现跳转，则是阅读器默许的事情被触发，咱们需要运用e.preventDefault()来阻挠默许事情。

投进区的事情

关于被拖的元素而言，拖向何处则为投进区，投进区的事情如下：

dragenter 被拖放元素进入

dragover 被拖放元素移动

dragleave 被拖放元素脱离

而drop则是监听被拖拽物拖拽到投进区并松开鼠标的事情，他能够接收到dataTransfer中的数据，所以咱们的页面内拖拽能够写成如下效果

关于谷歌阅读器，e.dataTransfer.setData(key,value)会导致拖拽到投进区域外的时分阅读器默许查找设置的值。假如需要，咱们能够屏蔽它

关于火狐阅读器，没有e.dataTransfer.setData(key，value)还不可。咱们能够直接设置键值对为null，””;

最新版本的谷歌和火狐阅读器没有发现问题

drop事情并不能直接触发,因为默许的松开鼠标咱们的拖拽物会回来原来的方位,并不会坠落,所以咱们应该阻挠投进区域的默许事情.

拖拽文件上传

经过调查，事情目标中的dataTransfer也存在files特点，咱们能够用熟悉的方法上传拖拽进来的文件：

然后做Ajax文件上传即可

one.ondrop = function(e) {
e.preventDefault()
var file = e.dataTransfer.files[0];
var formData = new FormData();
formData.append(“aa”, file);
var xml = new XMLHttpRequest();
xml.open(“post”, url, false);
xml.send(formData);
}

到此这篇关于HTML5拖拽文件上传的示例代码的文章就介绍到这了,更多相关HTML5拖拽上传内容请查找脚本之家以前的文章或持续阅读下面的相关文章！