我有一个代码,它使用 FileReader 将多个文件发送到服务器以显示图像,并使用 FormData 通过 ajax 发送。
我的代码有效,问题是显示多个进度条。如果我只选择一个文件,它可以工作。
但是如果我选择多个文件,它会在最后一个进度条中显示所有文件的进度。
任何人都可以帮忙吗?
(function () {
var input = document.getElementById("images")
function showUploadedItem (file, id) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var template = '<li>'+
'<img src="'+e.target.result+'">'+
'<br />'+
'<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
'</li>';
$("#image-list").append(template);
};
})(file);
reader.readAsDataURL(file);
}
input.addEventListener("change", function (evt) {
for (var i=0, j=this.files.length; i<j; i++) {
file = this.files[i];
formdata = new FormData();
formdata.append("images[]", file);
var xhr = new XMLHttpRequest();
xhr.id = "progress_" + Math.floor((Math.random() * 100000));
xhr.addEventListener("loadstart", function(e){
showUploadedItem(file, xhr.id);
});/*
xhr.addEventListener('progress', function(e) {
}, false);*/
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$("#" + xhr.id).attr('value', Math.floor((e.loaded / e.total) * 100) )
};
/*xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};*/
xhr.open('post', 'upload.php', true);
xhr.send(formdata);
}
}, false);}());
我的PHP代码:
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}} echo "<h2>Successfully</h2>";
我的html;
<div id="main">
<div style="padding-bottom:10px">
<input type="file" name="images" id="images" multiple />
</div>
<ul id="image-list"></ul>
<br style="clear:both">
</div>