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

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

GitHub地址：https://github.com/codeplay2015/dragToUpload

由于我在代码中的注释非常详细，具体的逻辑实现就不介绍了，所以我们可以直接看到代码并理解它。现在只需列出函数列表和一些使用的知识点：

模态盒文件批量上传使用formData API封装数据，通过ajax方法提交和读取拖放文件，ondrop事件dataTransfer对象清空所有文件知识点：

Singleton pattern:在singleton pattern中构建formData容器，事件冒泡，事件委托：动态添加和删除单个文件，css各种布局，BFC CSS伪类链接vistied hover active html离线操作文档：创建片段离线操作，提高性能，减少浏览器重绘和回流原型链，prototype方法：给formData对象添加一个用于删除所有文件的CSS伪对象，结合后面的伪对象画一个‘x’，放在模态框右上角表示退出按钮的截图；

整体界面

单击“拖放上传”按钮

将文件拖放到虚线框中，当文件被拖入时，该框将变为红色。

上传成功，弹出提示

代码：

1.html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title link rel='样式表' href='demo.css' rel='外部no follow '/head dy！-mask-div class=' overlay'/div！-modal box-div id=' modal ' class=' Dropbox ' div class=' items-container ' div id=' close ' style=' cursor :指针；向右浮动：width :20 Px ' span class=' CSS-close '/span/div p class=' head '将文件拖放到此处/p div class=' content ' id=' content ' table class=' table ' t body=' t body '/t body/table/div class=' footer ' button class=' BTN ' onclick=' upload()'开始上传/button/div a href=' # ' onclick=' clearall()' style=' position 3360 absolute；bottom:10pxright:30px清空全部/a /div /div /div！-页面内容-div style=' margin-top :40 VH；文本对齐：中心；拖放以上传演示模板。单击下面的按钮弹出模式框/p按钮class=' BTN' onclick=' showmodal()'并单击上传/按钮/div！-嵌入式脚本-脚本src=' http 3360 jquery-1 . 10 . 2 . js ' type=' text/JavaScript '/script script src=' http 3360 demo . js ' type=' text/JavaScript '/script/body/html CSS。叠加{ z-index : 99位置：固定；显示器：无；top:0left:0宽度： 100%;高度： 100%;背景色： # 333;opacity:0.5 }。Dropbox { z-index : 100显示器：无；位置：固定；宽度宽度：500像素高度：520 pxmargin : autotop :0 right :0 bottom : 0；左转：0背景-color : # fff；边界半径：6 px过渡-持续时间： 0.9秒；-网络套件-过渡-持续时间：0.9秒；飞越：隐藏；文本对齐：中心；}.项目-容器{ padding: 10px }。内容{ border: 3px虚线灰色；边框半径： 10px余量： 10px 20px高度：400 px飞越：汽车；padding:2px 8px }。head { margin :0 pxfont-size :30 px；color: # aaa}。页脚{ margin:5px auto} .BTN {边界半径： 20px盒子尺寸：边框盒子；边框宽度： 2px背景色-:透明；font-size : 14px字体粗细： 500；padd : 7px 18px }/*画一个叉号，表示推出界面*/.CSS-close { display : inline-block；宽度：15 px高度：2px背景技术： # 000;字号：0；线高：0;垂直对齐：毫米；-webkit-transform:旋转(45 );}.CSS-关闭：在{内容： }之后。显示：块；宽度：15 px高度：2px背景技术： # 000;-WebKit-变压器：旋转(90度);}/*表格样式*/.表{宽度：100%；边界崩溃：崩溃；} #内容tr :第一子TD {边框-顶部-宽度： 0px} #内容tr TD :最后一个孩子{光标：指针；颜色：红色；} # content tr TD { padd : 8px white-space : nowrap；飞越：隐藏；文本溢出：省略号；边框-top:1px实心# 9A9A9A} #内容tr :悬停{背景色： # D5 D5；} #内容tr :活动{背景色： # 9A9A9A} a :链接{ color : blue} a :已访问{ color:blue} a :悬停{ color : blue} a :活动{ color : red}js代码：

函数showModal() { //打开上传框var modal=文档。getelementbyid(' modal ')；var overlay=文档。getelementsbyclassname(' overlay ')[0]；覆盖。风格。display=' block莫代尔。风格。display=' block}函数closeModal() { //关闭上传框var modal=文档。getelementbyid(' modal ')；var overlay=文档。getelementsbyclassname(' overlay ')[0]；覆盖。风格。显示='无'；莫代尔。风格。显示='无'；}//用DOM2级方法为右上角的叉号和黑色遮罩层添加事件：点击后关闭上传框文件。getelementsbyclassname(' overlay ')[0].addEventListener('click '，closeModal，false)；document.getElementById('close ').addEventListener('click '，closeModal，false)；//利用html5 FormData() API，创建一个接收文件的对象，因为可以多次拖拽，这里采用单例模式创建对象dragfilevar Dragfiles=(function(){ var instance；返回函数(){ if(！实例){ instance=new FormData()；}返回实例；}}());//为Dragfiles添加一个清空所有文件的方法formdata。原型。delete all=function(){ var _ this=this；this.forEach(函数（值，键){ _this.delete(键);})}//添加拖拽事件var dz=文档。getelementbyid(' content ')；dz.ondragover=function (ev) { //阻止浏览器默认打开文件的操作ev。prevent default()；//拖入文件后边框颜色变红这个。风格。边框颜色='红色'；}dz.ondragleave=function () { //恢复边框颜色这个。风格。边框颜色='灰色'；}dz.ondrop=function (ev) { //恢复边框颜色这个。风格。边框颜色='灰色'；//阻止浏览器默认打开文件的操作ev。prevent default()；var文件=ev。数据传输。文件；var len=files.length，I=0；var frag=文档。createdocumentfragment()；//为了减少射流研究…修改数字正射影像图树的频度，先创建一个碎片，然后在碎片里操作var tr，时间，大小；var new form=Dragfiles()；//获取单例新形式。entries()；//创建一个迭代器，测试用while(ilen){ tr=document。创建元素(' tr ')；//获取文件大小size=Math.round(文件[i].大小* 100/1024)/100 ' KB '；//获取格式化的修改时间时间=文件[I]。最后修改日期。ToLocaleDateString()' '文件[I]。最后修改日期。ToTimesString().拆分("")[0];tr.innerHTML='td '文件[i].名称/tdtd '时间/tdtd '大小/tdtd删除/TD '；console.log(大小' '时间);弗拉格。append child(tr)；//添加文件到newForm newForm.append(文件[i].名称、文件[I])；//控制台。记录下来。next())；我；} this.childNodes[1]。子节点[1]。appendChild(frag)；//为什么是'1'?文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。

而且都包含在子节点属性所返回的数组中。不同于翡翠模板}函数blink(){ document。getelementbyid(' content ')。风格。bordercolor=' gray}//ajax上传文件函数上传(){ if(文档。getelementsbytagname(' t body '[0]).hasChildNodes()==false){ document。getelementbyid(' content ')。风格。bordercolor=' redsetTimeout(闪烁，200);返回false } var data=Dragfiles()；//获取formData $ .ajax({ url: 'upload '，type: 'POST '，data: data，async: true，cache: false，contentType: false，processData: false，success : function(data){ alert(' success！') //可以替换为自己的方法closeModal()；数据。全部删除()；//清空formData $(' .' t '车身.empty()；//清空列表}，错误：函数(returndata) { alert('失败!') //可以替换为自己的方法} });}//用事件委托的方法为'删除'添加点击事件，使用jquery中的在方法$('.' t '车身.on('click '，' tr td:last-child '，function(){ //删除拖拽框已有的文件var temp=Dragfiles()；var key=$(this).prev().prev().prev().text()；console.log(键);temp.delete(键);$(这个)。父项()。移除();});//清空所有内容函数clearAll(){ if(document。getelementsbytagname(' t body '[0]).hasChildNodes()==false){ document。getelementbyid(' content ')。风格。bordercolor=' redsetTimeout(闪烁，300);返回false } var data=Dragfiles()；数据。全部删除()；//清空formData //$(' .' t '车身.empty()；等同于以下方法文件。getelementsbytagname(' t body '[0]).innerHTML=}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。