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="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({
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>