这不是整个代码,但我认为它的相关部分。如何为每个放入dropzone的文件动态创建单独的进度条?
function sendFile(file) {
xhr.upload.addEventListener('progress', function (ev) {
var bar = document.getElementById("progressBar");
progressBar.value += percentComplete;
}, false);
dropzone.ondrop = function (event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i = 0; i < filesArray.length; i++) {
sendFile(filesArray[i]);
//trigger progress bar with sendFile
document.getElementById('file').innerHTML += '<li>' + filesArray[i].name + ' ' + '<progress id="progressBar" value="0" max="100"></progress></div></li>';
}
}
答案 0 :(得分:0)
我使用jquery稍微改变了你的代码。
function sendFile(file) {
xhr.upload.addEventListener('progress', function (ev) {
var bar = document.getElementById("progressBar");
progressBar.value += percentComplete;
}, false);
dropzone.ondrop = function (event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i = 0; i < filesArray.length; i++) {
sendFile(filesArray[i]);
//trigger progress bar with sendFile
$('#outputlist').append('<li>'+fileArray[i].name+' <progress value="0" max="100"></progress></li>');
}
}
让我们来谈谈你必须更新与文件名对应的进度条,这是一个挑战。
<progress id=fileArray[i].name value="0" max="100"></progress>
您可以使用文件名更新进度条。