宜宾网站建设公司

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

最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小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'号，放在模态框右上角表示退出按钮

截图：

整体界面

前端页面文件拖拽上传模块js代码示例

点击‘拖拽上传'按钮

前端页面文件拖拽上传模块js代码示例

拖拽文件到虚线框，文件拖入会边框变红提示

前端页面文件拖拽上传模块js代码示例

上传成功，弹出提示

前端页面文件拖拽上传模块js代码示例

代码：

1. html:




 
 Title
 


 
 

 
 
 
 

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

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


网站名称：前端页面文件拖拽上传模块js代码示例-创新互联
本文链接：http://ybzwz.com/article/dosdoc.html

其他资讯