Posted in Javascript onMay 19, 2017
最近给卫生局做一个表格上传/可视化系统,算是小有成果。今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小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:
<!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" style="cursor:pointer;float: right;width:20px"> <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 style="margin-top:40vh;text-align: center;"> <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>
CSS
.overlay{ z-index: 99; position:fixed; display: none; top:0; left:0; width: 100%; height: 100%; background-color: #333; opacity:0.5; } .dropbox{ z-index: 100; display: none; position: fixed; width:500px; height:520px; margin:auto; top:0; right:0; bottom: 0; left:0; background-color: #fff; border-radius:6px; transition-duration: 0.9s; -webkit-transition-duration: 0.9s; overflow:hidden; text-align: center; } .items-container{ padding: 10px; } .content{ border: 3px dashed gray; border-radius: 10px; margin: 10px 20px; height:400px; overflow: auto; padding:2px 8px; } .head{ margin:0px; font-size:30px; color:#aaa; } .footer{ margin:5px auto } .btn{ border-radius: 20px; box-sizing: border-box; border-width: 2px; background-color: transparent; font-size: 14px; font-weight: 500; padding: 7px 18px } /*画一个叉号,表示推出界面*/ .css-close{display:inline-block; width:15px; height:2px; background:#000; font-size:0; line-height:0;vertical-align:middle;-webkit-transform: rotate(45deg);} .css-close:after { content:'.'; display:block; width:15px; height:2px; background:#000;-webkit-transform: rotate(90deg);} /*表格样式*/ .table{ width:100%; border-collapse: collapse; } #content tr:first-child td{ border-top-width: 0px; } #content tr td:last-child{ cursor: pointer; color: red; } #content tr td{ padding: 8px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; border-top:1px solid #9A9A9A; } #content tr:hover{ background-color: #d5d5d5; } #content tr:active{ background-color: #9A9A9A; } a:link{ color:blue; } a:visited{ color:blue; } a:hover{ color:blue; } a:active{ color:red; }
js代码:
function showModal() { //打开上传框 var modal = document.getElementById('modal'); var overlay = document.getElementsByClassName('overlay')[0]; overlay.style.display = 'block'; modal.style.display = 'block'; } function closeModal() { //关闭上传框 var modal = document.getElementById('modal'); var overlay = document.getElementsByClassName('overlay')[0]; overlay.style.display = 'none'; modal.style.display = 'none'; } //用DOM2级方法为右上角的叉号和黑色遮罩层添加事件:点击后关闭上传框 document.getElementsByClassName('overlay')[0].addEventListener('click', closeModal, false); document.getElementById('close').addEventListener('click', closeModal, false); //利用html5 FormData() API,创建一个接收文件的对象,因为可以多次拖拽,这里采用单例模式创建对象Dragfiles var Dragfiles=(function (){ var instance; return function(){ if(!instance){ instance = new FormData(); } return instance; } }()); //为Dragfiles添加一个清空所有文件的方法 FormData.prototype.deleteAll=function () { var _this=this; this.forEach(function(value,key){ _this.delete(key); }) } //添加拖拽事件 var dz = document.getElementById('content'); dz.ondragover = function (ev) { //阻止浏览器默认打开文件的操作 ev.preventDefault(); //拖入文件后边框颜色变红 this.style.borderColor = 'red'; } dz.ondragleave = function () { //恢复边框颜色 this.style.borderColor = 'gray'; } dz.ondrop = function (ev) { //恢复边框颜色 this.style.borderColor = 'gray'; //阻止浏览器默认打开文件的操作 ev.preventDefault(); var files = ev.dataTransfer.files; var len=files.length, i=0; var frag=document.createDocumentFragment(); //为了减少js修改dom树的频度,先创建一个fragment,然后在fragment里操作 var tr,time,size; var newForm=Dragfiles(); //获取单例 var it=newForm.entries(); //创建一个迭代器,测试用 while(i<len){ tr=document.createElement('tr'); //获取文件大小 size=Math.round(files[i].size * 100 / 1024) / 100 + 'KB'; //获取格式化的修改时间 time = files[i].lastModifiedDate.toLocaleDateString() + ' '+files[i].lastModifiedDate.toTimeString().split(' ')[0]; tr.innerHTML='<td>'+files[i].name+'</td><td>'+time+'</td><td>'+size+'</td><td>删除</td>'; console.log(size+' '+time); frag.appendChild(tr); //添加文件到newForm newForm.append(files[i].name,files[i]); //console.log(it.next()); i++; } this.childNodes[1].childNodes[1].appendChild(frag); //为什么是‘1'?文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中.不同于jade模板 } function blink() { document.getElementById('content').style.borderColor = 'gray'; } //ajax上传文件 function upload(){ if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){ document.getElementById('content').style.borderColor = 'red'; setTimeout(blink,200); return false; } var data=Dragfiles(); //获取formData $.ajax({ url: 'upload', type: 'POST', data: data, async: true, cache: false, contentType: false, processData: false, success: function (data) { alert('succeed!') //可以替换为自己的方法 closeModal(); data.deleteAll(); //清空formData $('.tbody').empty(); //清空列表 }, error: function (returndata) { alert('failed!') //可以替换为自己的方法 } }); } // 用事件委托的方法为‘删除'添加点击事件,使用jquery中的on方法 $(".tbody").on('click','tr td:last-child',function(){ //删除拖拽框已有的文件 var temp=Dragfiles(); var key=$(this).prev().prev().prev().text(); console.log(key); temp.delete(key); $(this).parent().remove(); }); //清空所有内容 function clearAll(){ if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){ document.getElementById('content').style.borderColor = 'red'; setTimeout(blink,300); return false; } var data=Dragfiles(); data.deleteAll(); //清空formData //$('.tbody').empty(); 等同于以下方法 document.getElementsByTagName('tbody')[0].innerHTML=''; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
前端页面文件拖拽上传模块js代码示例
- Author -
codeplay_guo声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@