1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fileUpload</title> 6 <style type="text/css"> 7 body{ 8 font-family: 'microsoft yahei'; 9 padding-top:10px; 10 } 11 #input{ 12 opacity:0; 13 filter:alpha(opacity=0); 14 height: 50px; 15 position: absolute; 16 top: 3px; 17 left: 17px; 18 } 19 #fileSelect{ 20 padding: 6px 10px; 21 background-color: #fff; 22 border: 1px solid #000; 23 margin: 10px; 24 } 25 #platform{ 26 margin-top: 10px; 27 /*float: left;*/ 28 } 29 #files{ 30 min-height: 100px; 31 overflow: hidden; 32 zoom:1; 33 width: 500px; 34 border: 1px solid #222; 35 margin:10px; 36 padding: 10px; 37 float: left; 38 } 39 40 .filesInfo{ 41 width:100px; 42 height: 120px; 43 background-color: rgba(0, 150, 136, 0.08); 44 border: 1px solid #000; 45 float: left; 46 margin: 10px; 47 text-align: center; 48 } 49 .bar{ 50 background-color: #00CC99; 51 width: 0; 52 height:10px; 53 display: block; 54 } 55 .animate{ 56 -webkit-animation:music_disc 5s linear; 57 -ms-animation:music_disc 5s linear; 58 -o-animation:music_disc 5s linear; 59 animation:music_disc 5s linear; 60 } 61 @keyframes music_disc{ 62 0%{ 63 width:0px; 64 } 65 100%{ 66 width:100px; 67 } 68 } 69 #cancelFiles{ 70 min-height: 100px; 71 overflow: hidden; 72 zoom:1; 73 float: left; 74 width: 300px; 75 border: 1px solid #000; 76 margin:10px; 77 padding: 2px 10px; 78 } 79 #btn{ 80 clear: both; 81 display: block; 82 width: 150px; 83 height: 40px; 84 font-size: 20px; 85 font-family: 'microsoft yahei'; 86 background-color: #fff; 87 border: 1px solid #000; 88 margin-left: 175px; 89 90 } 91 92 #btn:hover,#fileSelect:hover{ 93 background-color: #000; 94 color:#fff; 95 } 96 </style> 97 <script language="JavaScript" type="application/javascript"> 98 window.onload=function(){ 99 var oBtn = document.getElementById('btn'); 100 var files = document.getElementById('files'); 101 var filesInfo = files.getElementsByClassName('filesInfo'); 102 103 oBtn.onclick=function(){ 104 105 if(filesInfo.length > 0){ 106 //为每一个文件的进度条增加效果 107 for(var i = 0; i < filesInfo.length;i++){ 108 var bar = filesInfo[i].getElementsByClassName('bar')[0]; 109 // console.log(bar.className); 110 bar.className = "bar animate"; 111 } 112 }else{ 113 alert("没有待上传的文件") 114 } 115 } 116 117 //进度完成后显示上传成功 118 files.addEventListener("webkitAnimationEnd",function(){ 119 alert('文件上传成功'); 120 }); 121 }; 122 123 //选择文件后响应 124 function handleFiles(files){ 125 // console.log(files); 126 var fileName = files[0].name.substring(0,5)+'...'; 127 var fileSize = parseInt(Math.round((files[0].size)/1024)) + "kb"; 128 // console.log(fileSize) 129 //创建文件框和其他信息 130 var oDiv = document.createElement('div'); 131 var titleName = document.createElement('h5'); 132 var titleSize = document.createElement('h5'); 133 var bar = document.createElement('div'); 134 var filesDiv = document.getElementById('files'); 135 136 // console.log(filesDiv); 137 //生成样式 138 oDiv.setAttribute('class','filesInfo'); 139 titleName.setAttribute('class','name'); 140 titleSize.setAttribute('class','size'); 141 bar.setAttribute('class','bar'); 142 143 oDiv.setAttribute('draggable','true'); 144 oDiv.setAttribute('ondragstart','drag(event)'); 145 oDiv.setAttribute('id','drag'+fileSize); 146 147 //赋入name和size 148 titleName.innerHTML = fileName; 149 titleSize.innerHTML = fileSize; 150 151 //插入节点 152 oDiv.appendChild(titleName); 153 oDiv.appendChild(titleSize); 154 oDiv.appendChild(bar); 155 filesDiv.appendChild(oDiv); 156 } 157 158 //文件拖拽 159 function allowDrop(ev){ 160 ev.preventDefault(); 161 } 162 function drag(ev){ 163 ev.dataTransfer.setData("Text",ev.target.id); 164 } 165 function drop(ev){ 166 ev.preventDefault(); 167 var data = ev.dataTransfer.getData("Text"); 168 // console.log(data); 169 ev.target.appendChild(document.getElementById(data)); 170 } 171 </script> 172 </head> 173 <body> 174 <a id="fileSelect"> 175 选择文件 176 <input type="file" id="input" onchange="handleFiles(this.files)"> 177 </a> 178 <div id="platform" ondrop="drop(event)" ondragover="allowDrop(event)"> 179 <div id="files"></div> 180 <div id="cancelFiles" ondrop="drop(event)" ondragover="allowDrop(event)"> 181 <p>撤销上传拖至此处</p> 182 </div> 183 </div> 184 <button id="btn">上传</button> 185 </body> 186 </html>