1

これはコード全体ではありませんが、関連する部分だと思います。ドロップゾーンにドロップされたファイルごとに動的に作成された個々の進行状況バーを作成するにはどうすればよいですか?

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>';
        }
    }
4

1 に答える 1

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>

ファイル名を使用して進行状況バーを更新できます。

于 2012-07-19T11:37:02.607 に答える