前端页面文件拖拽上传模块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:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="demo.css" rel="external nofollow" >
</head>
<body>
 <!--遮罩-->
 <div class="overlay"></div>
 <!--模态框-->
 <div id="modal" class="dropbox">
  <div class="items-container">
   <div id="close" >
    <span class="css-close"></span>
   </div>
   <div>
    <p class="head"><b>拖拽文件至此</b></p>
    <div class="content" id="content">
     <table class="table">
      <tbody class="tbody"></tbody>
     </table>
    </div>
    <div class="footer">
     <button class="btn" onclick="upload()">开始上传</button>
    </div>
    <a href='#' onclick='clearAll()' style='position:absolute;bottom:10px;right:30px;'>清空所有</a>
   </div>
  </div>
 </div>
 <!--页面内容-->
 <div >
  <p>拖拽上传演示模板。点击下方按钮，弹出模态框</p>
  <button class="btn" onclick="showModal()">点击上传</button>
 </div>
 <!--嵌入脚本-->
 <script src="jquery-1.10.2.js" type="text/javascript"></script>
 <script src="demo.js" type="text/javascript"></script>
</body>
</html>

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

新闻标题：前端页面文件拖拽上传模块js代码示例-创新互联
浏览路径：https://www.cdcxhl.com/article2/dosdoc.html

成都网站建设公司_创新互联，为您提供网站策划、网站建设、标签优化、定制开发、域名注册、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容