人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
这篇讲的是一个人人网早在2011年就上线的前端功能——首页拖拽上传，作者从这个实际案例出发，详细拆解了背后的实现技术。当时这个功能不仅是为了提升用户体验，也承载着向用户推广标准浏览器、逐步淘汰IE的期望。 文章核心围绕着三个HTML5关键API展开：首先是Drag&Drop事件机制，用于监听用户将文件拖入、拖离页面的行为；其次是File API中的FileList和FileReader，它们负责获取被拖拽文件的列表并读取其内容；最后是基于XMLHttpRequest Level 2的FormData对象，它能像表单一样封装文件数据，从而实现通过AJAX直接向服务器发送二进制文件流。 作者没有停留在理论介绍，而是直接给出了关键部分的代码示例，比如如何监听`dragenter`、`dragover`、`drop`等事件，并特别强调了清除`dragover`默认行为的重要性，否则后续的`drop`事件将无法触发。这些细节清晰地展示了一个完整拖拽上传功能的实现骨架。 虽然技术方案有一定年份，但文章清晰展示了如何组合基础API解决一个实际的交互问题，对于理解前端文件处理与异步上传的演进脉络仍有不错的参考价值。