前端页面文件拖拽上传模块js代码示例-创新互联

最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。

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:

 
 
 


 
 

 
 

  

   

    
   
   

    
拖拽文件至此
    

     
    
    

     开始上传
    
    清空所有
   
  
 
 
 

  
拖拽上传演示模板。点击下方按钮，弹出模态框
  点击上传
 
 
 
 

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。