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

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

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

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

来源

2014-12-02 garima

尝试这种情况：

<!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()功能加入

来源

2014-12-02 05:28:26

感谢Sunil，显示多个进度条，但setInterval函数不适用于任何进度条。 – garima 2014-12-02 05:40:19

@garima通过setInterval中的元素循环 – 2014-12-02 05:46:34

@garima代码更新，请结帐 – 2014-12-02 05:50:54

虽然你分配：

var p=elements[0];

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

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

您的网页上，你应该动态地创建了多个元素进度条。

来源

2014-12-02 05:15:43

如果我使用VAR P =元素[I];但不工作 – garima 2014-12-02 05:29:36

当然，它不工作，如果你使用p = elements [i];你应该动态地创建像@Sunil Kumar那样的新元素。 – 2014-12-02 05:36:23

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

回答

相关问题