Javascript 使用jquery、html和css显示多个进度条和多个文件上载_Javascript_Jquery_Html_Css

Javascript 使用jquery、html和css显示多个进度条和多个文件上载

javascript jquery html css

Javascript 使用jquery、html和css显示多个进度条和多个文件上载,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用一个浏览按钮选择要上载的多个文件，但所有上载的文件只显示一个进度条。请查看以下代码： <!doctype html> <html> <head> <title>Proper Title</title> <style> .a{ display:none; } </style>

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

<!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>

我必须为单独的文件上载显示单独的进度条。

尽管您分配了：

var p=elements[0];

您可以将多个变量p引用到相同的元素[0]，即

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

在您的页面上，您应该为进度条动态创建多个元素。

尝试以下操作：

<!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>

更新

添加了更新进度函数

当然，如果使用p=elements[i]，它将不起作用；您应该像@Sunil Kumar did那样动态创建新元素。感谢Sunil，显示了多个进度条，但setInterval函数对任何进度条都不起作用。@garima在setInterval中循环元素