批量上传
稍作修改
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bulk Upload</title>
<style type="text/css">
.progressbar {
background-color: lime;
height: 20px;
text-align: center;
width: 0px;
}
.progress {
border: 1px solid lime;
width: 300px;
}
.filelist li {
margin-bottom: 20px;
}
table {
border-collapse: collapse;
/*margin: 0 auto;*/
text-align: center;
width: 500px;
}
table td, table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th {
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #F5FAFA;
}
</style>
<script src="../lib/jquery/jquery-1.5.2.min.js"></script>
</head>
<body>
<div>
<input type="file" id="fileMultiple" name="files" multiple="multiple" />
<div style="margin: 20px 0px 20px;">
<table>
<tr>
<th>上传成功文件数量</th>
<th>上传失败文件数量</th>
</tr>
<tr>
<td><span id="successUploadFile" style="color: lime;">0</span></td>
<td><span id="failUploadFile" style="color: red;">0</span></td>
</tr>
</table>
</div>
<ol class="filelist"></ol>
</div>
<script>
var fileIndex = 0;
var uploadFile = null;
var $successUploadFile = $('#successUploadFile');
var $failUploadFile = $('#failUploadFile');
var successCount = 0;
var failCount = 0;
$(function () {
$("#fileMultiple").change(function eventStart() {
//获取当前选择的所有文件
uploadFile = this.files;
//循环添加进度条
for (var i = 0; i < uploadFile.length; i++) {
$(".filelist").append(
"<li id=" + i + "file>" +
"<div class='progress'>" +
"<div id = " + i + "bar class= 'progressbar' ></div >" +
"</div >" +
"<span class='filename'>" + uploadFile[i].name + "</span>" +
"<span id = " + i + "pps class= 'progressnum' > - " + Math.round(uploadFile[i].size / 1024) + "KB</span >" +
"</li>");
}
//上传文件
upload();
}).click(function () {
//每次点击选择文件，都清空上传记录
$('.filelist').empty();
successCount = 0;
failCount = 0;
$successUploadFile.text('0');
$failUploadFile.text('0');
});
function upload() {
//采用递归的方式循环发送ajax请求
if (fileIndex >= uploadFile.length) {
$("#fileMultiple").val("");
fileIndex = 0;
return;
}
//大于21MB的文件不允许上传
if (uploadFile[fileIndex].size / 1024 / 1024 > 21) {
//展示上传失败文件
//$failUploadFile.text($failUploadFile.text() + '\xa0<' + uploadFile[fileIndex].name + '>\xa0|');
$failUploadFile.text(++failCount);
$(".filelist").find("#" + fileIndex + "bar").text('').css({ width: '100%', 'background-color': 'red' });
//递归条件
fileIndex++;
upload();
return;
}
//将file对象添加到formData对象中
var formData = new FormData();
formData.append('Filedata', uploadFile[fileIndex]);
$.ajax({
url: 'UploadPhoto.aspx',
type: 'POST',
cache: false,
data: formData, //文件以formData形式传入
processData: false, //必须false
contentType: false, //必须false才会自动加上正确的Content-Type
xhr: function () { //监听用于上传显示进度
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", onprogress, false);
return xhr;
}
},
success: function () {
//展示上传成功文件
$successUploadFile.text(++successCount);
//递归条件
fileIndex++;
upload();
},
error: function () {
//展示上传失败文件
//$failUploadFile.text($failUploadFile.text() + '\xa0<' + uploadFile[fileIndex].name + '>\xa0|');
$failUploadFile.text(++failCount);
$(".filelist").find("#" + fileIndex + "bar").text('').css({ width: '100%', 'background-color': 'red' });
//递归条件
fileIndex++;
upload();
}
});
}
function onprogress(evt) {
//已经上传的百分比
var uploadPercent = Math.floor(evt.loaded / evt.total * 100) + '%';
$(".filelist").find("#" + fileIndex + "bar").text(uploadPercent).width(uploadPercent);
};
})
</script>
</body>
</html>
