js文件读取时的进度条显示
1 <html> 2 <head> 3 <title>进度条显示</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script src="jQuery/jquery-2.0.0.min.js" type="text/javascript"></script> 7 <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 8 <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> 9 <script src="jQuery/zip.js" type="text/javascript"></script> 10 11 </head> 12 <body> 13 <div class="table_div" style="border: 1px solid #ddd;padding-top: 10px;"> 14 <table class="mytable " width="200" style="table-layout:fixed;"> 15 <tbody> 16 <tr id="newmain_tr"> 17 <td id="newAdd_MainImgTD" class="add_myimg" style="display: block;"> 18 <img src="img/add.png" class="gameImg"> 19 <input type="file" multiple="" id="newAdd_MainImg" class="img_up" name="upload-file" onchange="consult_launch.newAdd_MainImg(this)"> 20 </td> 21 </tr> 22 </tbody> 23 </table> 24 </div> 25 26 <div class="me" id="add_info" style="width:400px;height:50px;margin-top: 250px;margin-left: 800px; display: none"> 27 <div class="m" id="out" style="height:20px;position:relative"> 28 <div class="m" id='perentage' style="height:20px;border: 1px solid #cccccc;color: red;text-align:center;"></div> 29 <div class="m" id="inner" style="height:20px;background: green;position:relative;bottom:20px;z-index: -1"></div> 30 </div>" 31 </div> 32 33 </body> 34 </html>
<script> consult_launch.newAdd_MainImg = function (e) { var files = []; files = e.files; if (files != null && files.length > 0) { var totalSize = 0; for (var ii = 0; ii < files.length; ii++) { totalSize += files[ii].size; } function nextimg() { if (i < files.length) { addfileList.push(files[i]); var reader = new FileReader(); var currentSize = 0; reader.onprogress = function (e) {//此方法只代表当前的文件 console.log("sfg"); $("#add_info").css("display", "block"); currentSize = e.loaded; for (var j = 0; j < i; j++) {//累加之前已读取的文件 currentSize += files[j].size; } var perentage = ((currentSize / totalSize) * 100).toFixed(2); $("#inner").css({ width: perentage + "%" }); $("#perentage").html(perentage + "%"); } reader.onload = function (e) {//单个的 var lis = ""; lis += '<td class="maintd"><img id="735E82FF3A508294" src="' + e.target.result + '" class="gameImg" data-toggle="modal" data-target="#img_1"></td>'; $("#newAdd_MainImgTD").before(lis); i++;//只有成功了以后再加一 nextimg(i); } reader.readAsDataURL(files[i]); } else { $("#newAdd_MainImg").val(""); setTimeout(function () { alert("读取完成!"); $("#add_info").css("display", "none"); }, 200); } } var i = 0; nextimg(i); } else { alert("获取文件失败!"); } } </script>