【前端积累】图片上传

  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>