Question

我使用一个浏览按钮选择要上传的多个文件，但只显示所有上传文件的1个进度条。请查看以下代码：

<!doctype html>
<html>
    <head>
        <title>Proper Title</title>
        <style>
            .a{
                display:none;
            }
        </style>

    </head>
    <body>
        <form id="myForm" method="post" enctype="multipart/form-data" ">
            Files: <input type="file" id="files" name="files" multiple><br/>
            <div id="selectedFiles"></div>
            <progress class='a'  max=100 value=10></progress>
            <input type="submit" >
        </form>
        <script>
            var selDiv = "";
            document.addEventListener("DOMContentLoaded", init, false);
            function init() {
                document.querySelector('#files').addEventListener('change', handleFileSelect, false);
                selDiv = document.querySelector("#selectedFiles");
            }
            function handleFileSelect(e) {
                if (!e.target.files)
                    return;
                selDiv.innerHTML = "";
                var files = e.target.files;
                var elements = document.getElementsByClassName('a');
                for (var i = 0; i < files.length; i++) {
                    var f = files[i];
                    var p = elements[0];
                    selDiv.innerHTML += f.name + "<br>";
                    p.style.display = 'block';
                    setInterval(function () {
                        var a = p.value;
                        a = a + 10;
                        //document.write(a);
                        p.value = a;
                    }, 1500);
                }
            }
        </script>
    </body>
</html>

我必须显示单独的进度条以进行单独的文件上传。

Answer 1

虽然您已分配：

var p=elements[0];

你的多个变量p指的是相同的元素[0]，即

<progress class='a'  max=100 value=10></progress>

在您的页面上

，您应该为进度条动态创建多个元素。

Answer 2

试试这个：

<!doctype html>
<html>
<head>
<title>Proper Title</title>
<style>
.a{
display:none;
}

</style>

</head>

<body>

    <form id="myForm" method="post" enctype="multipart/form-data">
        Files: <input type="file" id="files" name="files" multiple><br/>
        <div id="progress-wpr">
        <div class="filename"></div>
        <progress class='a'  max=100 value=10></progress>
        </div>
        <input type="submit" >
    </form>



    <script>

    var selDiv = "";

    document.addEventListener("DOMContentLoaded", init, false);

    function init() {
        document.querySelector('#files').addEventListener('change', handleFileSelect, false);
    }

    function handleFileSelect(e) {

        if(!e.target.files) return;

        var files = e.target.files;

         for(var i=1; i<files.length; i++) {
            var progress = document.createElement("progress");
            progress.setAttribute('class','a');
            progress.setAttribute('max','100');
            progress.setAttribute('value','100');
            var filename = document.createElement("div");
            filename.setAttribute('class','filename');
            document.getElementById('progress-wpr').appendChild(filename);
            document.getElementById('progress-wpr').appendChild(progress);
        }

        var elements = document.getElementsByClassName('a');
        var filename = document.getElementsByClassName('filename');
        for(var i=0; i<files.length; i++) {

            var f = files[i];
            var p=elements[i];

            filename[i].innerHTML = f.name;
            p.style.display='block';
            setInterval(update_progress, 1500);

        }

    }
function update_progress(){
     var elements = document.getElementsByClassName('a');
    for(var i=0; i<elements.length; i++) {
        var p=elements[i];
        var a=p.value;
        a=a+10;
        p.value=a;
    }
}
    </script>

</body>
</html>

<强>更新

添加了

update_progress()功能

使用jquery，html和css显示多个文件上传的多个进度条

2 个答案: