HTML5实现文件上传的拖拽示例代码

这篇文章主要介绍了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中的数据，所以我们的页面内拖拽可以写成如下效果。最新版本的谷歌和火狐浏览器没有发现问题。dRop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件。拖拽文件上传。经过观察，事件对象中的dataTransfer也存在files属性，我们可以用熟悉的方法上传拖拽进来的文件。然后做Ajax文件上传即可。到此这篇关于HTML5拖拽文件上传的示例代码的文章就介绍到这了。