dndUpload拖放上传组件
拖放操作的上传方式，前端用的是 HTML5 的拖放 API，后台是 Node.js 配合 formidable 做的。整体实现还挺简单，核心逻辑清晰，文件一拖就传，响应也快，体验还不错。兼容 IE10 以上，基本也够用了。
dndUpload的结构挺直观的，前端那块直接原生 JS 搞定，不依赖框架，适合想研究底层逻辑的你。用到了XMLHttpRequest 2.0来传文件，顺便还能看到进度条反馈，蛮实用的。
后台用的是 Node.js，靠formidable来上传的文件流，静态文件靠node-static服务。只要你装好node.js，接下来就简单了：
npm install
gulp release
npm start配置也不复杂，上传目标文件夹在server/config.json里调一下upload_dir就好。前端构建走的是gulp，注意要跑一遍gulp release，不然静态资源加载不完整。
如果你平时用 Vue 或 React 写惯了，不妨看看这个原生实现，了解下拖放上传的基本逻辑，说不定以后手写个小工具啥的也能派上用场。
顺带推荐几个相关资源，有兴趣可以看看：HTML5 拖放交互实现、带进度条上传文件，都挺实用。
如果你正好想做一个简洁的上传功能，又想搞点原生交互，那dndUpload还蛮合适的，拿来直接用或者魔改一波都可以。
文件大小：8.69KB
评论区