jquery的input:type=file实现文件上传 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>html5_2.html</title>
  5     <style>
  6         #up{
  7             z-index: 19891015;
  8             width: 600px;
  9             height: 350px;
 10             position: relative;
 11         }
 12         .title{
 13             background: #009f95;
 14             color: #fff;
 15             border: none;
 16             padding: 0 80px 0 20px;
 17             height: 42px;
 18             line-height: 42px;
 19             font-size:14px;
 20             border-radius: 2px 2px 0 0;
 21         }
 22         .file-box{
 23             display: inline-block;
 24             overflow: hidden;
 25             height: 38px;
 26             line-height: 38px;
 27             padding: 0 18px;
 28             background-color: #0e9aef;
 29             color: #fff;
 30             white-space: nowrap;
 31             text-align: center;
 32             font-size: 14px;
 33             border: none;
 34             border-radius: 2px;
 35             cursor: pointer;
 36             position: absolute;
 37             bottom: 8px;
 38             right: 164px;
 39         }
 40         .file-btn{
 41             position: absolute;
 42             width: 100%;
 43             height: 100%;
 44             bottom: 0;
 45             left: 0;
 46             outline: none;
 47             background-color: transparent;
 48             filter:alpha(opacity=0);
 49             opacity: 0;
 50         }
 51         .startBtn{
 52             display: inline-block;
 53             height: 38px;
 54             line-height: 38px;
 55             padding: 0 18px;
 56             background-color: #009688;
 57             color: #fff;
 58             white-space: nowrap;
 59             text-align: center;
 60             font-size: 14px;
 61             border: none;
 62             border-radius: 2px;
 63             cursor: pointer;
 64             position: absolute;
 65             bottom: 8px;
 66             right: 42px;
 67         }
 68         th{
 69             width: 155px;
 70             min-height: 20px;
 71             height: 28px;
 72             position: relative;
 73             overflow: hidden;
 74             text-overflow: ellipsis;
 75             white-space: nowrap;
 76             box-sizing: border-box;
 77             padding: 9px 15px;
 78             line-height: 20px;
 79             font-size: 14px;
 80             background:#f7f7f7;
 81             text-align: center;
 82         }
 83         table{
 84             border-spacing: 0;
 85             margin: 0 auto;
 86             /*border:1px solid #777;*/
 87         }
 88         thead{
 89             color:#666;
 90         }
 91         td{
 92             text-align: center;
 93         }
 94 
 95     </style>
 96     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 97     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 98 
 99 </head>
100 <body>
101 <div id="up">
102     <div class="title">文件上传</div>
103     <table>
104         <thead>
105         <tr>
106             <th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>文件名</span></div></th>
107             <th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>大小</span></div></th>
108             <th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>状态</span></div></th>
109             <th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>操作</span></div></th>
110         </tr>
111         </thead>
112         <tbody>
113 
114         </tbody>
115     </table>
116     <!--<input type="file" id="pic" name="pic" onchange="showPic()" value="选择多文件"/>-->
117     <form class="file-box" >
118         <input type="file"
119                multiple="multiple"
120                class="file-btn"
121                id="pic"
122                name="pic"  >
123         选择多文件
124     </form>
125     <button class="startBtn" >
126         开始上传
127     </button>
128 </div>
129 </body>
130 </html>
131 <script type="text/javascript">
132     function uploadFile(){
133         // var pic = $("#pic").get(0).files[0];
134         var pic=$('#pic').get(0).files;
135         console.log(pic.length)
136         var formData = new FormData();
137         for(var i=0;i<pic.length;i++){
138             formData.append("pic['+i+']",pic[i]);
139         }
140         formData.append("file" , pic[0]);
141 
142         $.ajax({
143             type: "POST",
144             url: '/rm/up/upload.afca',
145             data: formData ,
146             processData : false,
147             contentType : false ,//必须false才会自动加上正确的Content-Type
148             xhr: function(){
149                 var xhr = $.ajaxSettings.xhr();
150                 if(onprogress && xhr.upload) {
151                     xhr.upload.addEventListener("progress" , onprogress, false);
152                     return xhr;
153                 }
154             }
155         });
156     }
157     // 设置进度条
158     function onprogress(evt){
159         var loaded = evt.loaded;     //已经上传大小情况
160         var tot = evt.total;      //附件总大小
161         var per = Math.floor(100*loaded/tot);
162         $('#parent progress').val(per);
163         if(per=='100'){
164             $('#parent progess').css('display','none');
165             $('#parent').text('上传成功');
166         }
167         $("#son").css("width" , per +"%");
168     }
169 
170 
171     $('.file-btn').on('change',function(){
172         // 获取上传的文件名字
173         var str=$(this).val();
174         if(str!==""){
175             var arr=str.split("\\");
176             var fileName=arr[arr.length-1];
177         }
178         // 获取上传文件的大小
179         if (pic) {
180             var fileSize = 0;
181             if (pic.size > 1024 * 1024)
182                 fileSize = (Math.round(pic.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
183             else
184                 fileSize = (Math.round(pic.size * 100 / 1024) / 100).toString() + 'KB';
185         }
186 
187             var tr = $(['<td>'+fileName+'</td>'
188                 ,'<td>'+fileSize+'</td>'
189                 ,'<td id="situation"><div>等待上传</div></td>'
190                 ,'<td  id="deletePile"><button>删除</button></td>'
191                 ,'</div>'
192                 ,'</td>'
193                 ,'</tr>'].join(''));
194             console.log(tr);
195             $('tbody').html(tr);
196     });
197     // 开始按钮
198     $(".startBtn").on("click",function(){
199         uploadFile();
200         $('#situation').html('<div id="parent" style="color:green;"><progress value="0" max="100"></progress></div>')
201     });
202 </script>

 

posted @ 2018-05-04 16:46  前端极客  阅读(2174)  评论(0)  编辑  收藏  举报