使用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顯示多個文件上傳多個進度條

回答

相關問題