前段时间面试的时候经常遇到H5异步文件上传相关的问题。我也遇到了“通过H5拖拽功能异步上传文件”的问题。我大概知道H5新增了接收文件的拖放功能。如何异步上传文件是母鸡。面试完去看了相关知识点，了解到H5拖拽+FormData接口可以实现异步上传。为了测试文件上传是否成功，我们还查看了Node.js是如何接收异步文件上传的。所以，这将是一个完整的H5拖拽+FormData接口+Node.js实现文件异步上传的demo。先简单介绍一下这几个知识点，详细介绍贴个链接。感兴趣的同学可以点击了解更多。HTML5拖放拖放（Draganddrop）是HTML5标准的一部分。拖放是一种常见的功能，其中抓取对象然后将其拖到另一个位置。抓取的对象可以是页面中的DOM元素（需要设置draggable="true"），也可以是系统文件。监听放置元素的drop事件，通过DataTransfer对象可以获取拖动事件的状态和数据。有关详细信息，请参阅MDN的HTML5拖放API文档。FormData接口XMLHttpRequestLevel2增加了一个新接口FormData。使用FormData对象，我们可以通过JavaScript模拟一系列带有一些键值对的表单控件，也可以使用XMLHttpRequest的send()方法异步提交这个“表单”。与普通的ajax相比，使用FormData最大的优势就是我们可以异步上传一个二进制文件。具体可以参考MDN的FormData接口文档。后端文件接收保存后端采用Node.js+Express+Multer实现文件上传。Express基于Node.js平台，是一个快速、开放、极简的Web开发框架。Multer是一个处理multipart/form-data类型表单数据的node.js中间件，主要用于上传文件。其次，用上面的代码新建一个drop.html，插入如下代码HTML代码：首先添加一个放置的div，监听ondrop和ondragover事件。
