2023年7月9日发(作者：)

前端页⾯⽂件拖拽上传模块js代码⽰例最近给卫⽣局做⼀个表格上传/可视化系统，算是⼩有成果。今天把项⽬中的⽂件拖拽上传模块分离出来，做了⼀个独⽴的⼩demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。由于代码中我的注释很详尽，所以具体逻辑实现及不介绍了，⼤家直接看代码及能明⽩。现在简单列⼀个功能清单和⼀些⽤到的知识点清单：模态框⽂件的批量上传使⽤formData API 封装数据 并通过ajax⽅法提交读取拖放⽂件，ondrop事件 dataTransfer对象清空所有⽂件知识点：单例模式：构建⼀个单例模式的formData容器事件冒泡，事件委托：动态添加删除单个⽂件的⽅法css各种布局，BFCCSS 伪类 link vistied hover activehtml 离线操作⽂档：创建fragment 离线操作，提⾼性能，减少浏览器的重绘和回流原型链，原型⽅法：为formData对象添加⼀个删除所有⽂件的⽅法CSS伪对象，结合after伪对象画⼀个‘X'号，放在模态框右上⾓表⽰退出按钮截图：

整体界⾯

点击‘拖拽上传'按钮

拖拽⽂件到虚线框，⽂件拖⼊会边框变红提⽰

上传成功，弹出提⽰

代码：1. html:

y{ 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 = mentById('modal'); var overlay = mentsByClassName('overlay')[0]; y = 'block'; y = 'block';}function closeModal() { //关闭上传框 var modal = mentById('modal'); var overlay = mentsByClassName('overlay')[0]; y = 'none'; y = 'none';}//⽤DOM2级⽅法为右上⾓的叉号和⿊⾊遮罩层添加事件：点击后关闭上传框mentsByClassName('overlay')[0].addEventListener('click', closeModal, false);mentById('close').addEventListener('click', closeModal, false);//利⽤html5 FormData() API,创建⼀个接收⽂件的对象，因为可以多次拖拽，这⾥采⽤单例模式创建对象Dragfilesvar Dragfiles=(function (){ var instance; return function(){ if(!instance){ instance = new FormData(); } return instance; }}());//为Dragfiles添加⼀个清空所有⽂件的⽅法All=function () { var _this=this; h(function(value,key){ _(key); })}//添加拖拽事件var dz = mentById('content');over = function (ev) { //阻⽌浏览器默认打开⽂件的操作 tDefault(); //拖⼊⽂件后边框颜⾊变红 Color = 'red';}leave = function () { //恢复边框颜⾊ Color = 'gray';} = function (ev) { //恢复边框颜⾊ Color = 'gray'; //阻⽌浏览器默认打开⽂件的操作 tDefault(); var files = ; var len=, i=0; var frag=DocumentFragment(); //为了减少js修改dom树的频度，先创建⼀个fragment，然后在fragment⾥操作 var tr,time,size; var newForm=Dragfiles(); //获取单例 var it=s(); //创建⼀个迭代器，测试⽤ while(i'+time+''+size+'删除'; (size+' '+time); Child(tr); //添加⽂件到newForm (files[i].name,files[i]); //(()); i++; } odes[1].childNodes[1].appendChild(frag); //为什么是‘1'？⽂档⾥⼏乎每⼀样东西都是⼀个节点，甚⾄连空格和换⾏符都会被解释成节点。⽽且都包含在childNodes属性所返回的数组中.不同于jade模板}function blink(){ mentById('content').Color = 'gray';}//ajax上传⽂件function upload(){ if(mentsByTagName('tbody')[0].hasChildNodes()==false){ mentById('content').Color = '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(); All(); //清空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(); (key); (key); $(this).parent().remove();});//清空所有内容function clearAll(){ if(mentsByTagName('tbody')[0].hasChildNodes()==false){ mentById('content').Color = 'red'; setTimeout(blink,300); return false; } var data=Dragfiles();

All(); //清空formData //$('.tbody').empty(); 等同于以下⽅法 mentsByTagName('tbody')[0].innerHTML='';}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

发布者：admin，转转请注明出处：http://www.yc00.com/news/1688853960a176704.html