当我们学习了 HTML 提供的原生拖放(drag & drop)后,是时候想一想这个东西可以用来作什么,可以在什么时候使用,使用的场景等等
场景分析
当我们在注册成功一个账户时,一般网站会让我们上传我们的用户头像,或者在实名认证的时候会涉及到身份证图片上传到等,这时候我们可以使用input提供的file属性进行选择本地文件进行上传。
![0dadc007ba9d9d58d69b2688e1f33559.png](https://i-blog.csdnimg.cn/blog_migrate/045000f10f8153928b8a52486f3efb50.jpeg)
我们再想一下,当在电脑端的情况下,当用户打开文件选择框时再寻找图片对应的文件夹,再进行选取文件的时候是不是会有点麻烦呢?我们可不可以让用户找到图片文件,直接引入实现上传呢?答案是可以的。
怎么做
经过这些分析后,我们可以尝试使用 HTML5 提供的拖拽,使得目标元素增加读取文件功能,然后使用 ajax 实现图片上传。
谈一谈我们需要使用到的技术:
- Drag & Drop: HTML5 基于拖拽的事件机制
- File API: 可以很方便的让 Web 应用访问文件对象,File API 包括 FileList、Blob、File、FileReader、URI scheme,本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
- FormData: FormData 是基于 XMLHttpRequest Level 2 的新接口,可以方便 web 应用模拟 Form 表单数据,最重要的是它支持文件的二进制流数据,这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
HTML5 拖拽事件
关于 Drag & Drop 拖拽事件,之前我写过一篇专门介绍的文章,HTML5-拖拽,大家有兴趣的话可以点击链接查看,我在这里就不在多啰嗦了~下面直接出拖拽上传的简要代码示例
var oDragWrap = document.body;//拖进oDragWrap.addEventListener( "dragenter