javascript - 多个进度条/html5文件上传

Question

这不是全部代码，但我认为它是相关部分。如何为每个放入拖放区的文件动态创建单独的进度条？

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 + '&nbsp;' + '<progress id="progressBar"     value="0" max="100"></progress></div></li>';
        }
    }

Answer 1

我用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>

您可以使用文件名更新进度条。