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>
jquery的input:type=file实现文件上传
猜你喜欢
转载自www.cnblogs.com/yangguoe/p/8991399.html
今日推荐
周排行