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>

posted @ 2017-03-04 19:33 桃之夭夭，灼灼其华~~ 阅读(239) 评论(0) 收藏举报

刷新页面返回顶部