多个进度条/ 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>

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