最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。
创新互联建站专注于企业
网络营销推广、网站重做改版、新林网站定制设计、自适应品牌网站建设、
HTML5建站、
商城建设、集团公司官网建设、
外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为新林等各大城市提供网站开发制作服务。
gitHub地址：https://github.com/codeplay2015/dragToUpload
由于代码中我的注释很详尽，所以具体逻辑实现及不介绍了，大家直接看代码及能明白。现在简单列一个功能清单和一些用到的知识点清单：
- 模态框
- 文件的批量上传
- 使用formData API 封装数据 并通过ajax方法提交
- 读取拖放文件，ondrop事件 dataTransfer对象
- 清空所有文件
知识点：
- 单例模式：构建一个单例模式的formData容器
- 事件冒泡，事件委托：动态添加删除单个文件的方法
- css各种布局，BFC
- CSS 伪类 link vistied hover active
- html 离线操作文档：创建fragment 离线操作，提高性能，减少浏览器的重绘和回流
- 原型链，原型方法：为formData对象添加一个删除所有文件的方法
- CSS伪对象，结合after伪对象画一个‘X'号，放在模态框右上角表示退出按钮
截图：
整体界面
点击‘拖拽上传'按钮
拖拽文件到虚线框，文件拖入会边框变红提示
上传成功，弹出提示
代码：
1. html:
Title
拖拽上传演示模板。点击下方按钮，弹出模态框
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：前端页面文件拖拽上传模块js代码示例-创新互联
当前地址：
http://www.cdkjz.cn/article/dosdoc.html
