您现在的位置是：网站首页> 编程资料编程资料

HTML5拖拽文件上传的示例代码html5拖拽排序多图片上传插件特效源码HTML5 拖拽批量上传文件的示例代码html5实现多图片预览上传及点击可拖拽控件html5使用Drag事件编辑器拖拽上传图片的示例代码HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）HTML5 canvas实现移动端上传头像拖拽裁剪效果结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码html5 拖拽上传图片实例演示

2021-08-30 1303人已围观

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

请选择文件
读取文件信息

页面拖拽操作

对于被拖拽的元素,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拖拽上传内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！