HTML5文件上傳與多個進度

我有一個代碼，發送多個文件到服務器使用FileReader來顯示圖像和FormData通過ajax發送。HTML5文件上傳與多個進度

我的代碼有效，問題是顯示多個進度條。如果我只選擇一個文件，它可以工作。

但是，如果我選擇多個文件，它會顯示上一個進度條中所有文件的進度。

任何人都可以幫忙嗎？

(function() { 
var input = document.getElementById("images") 

function showUploadedItem (file, id) { 

    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 
      return function(e) { 
       var template = '<li>'+ 
            '<img src="'+e.target.result+'">'+ 
            '<br />'+ 
            '<progress min="0" max="100" value="0" id="'+id+'"></progress>'+ 
           '</li>';  
       $("#image-list").append(template); 
      }; 
    })(file); 

    reader.readAsDataURL(file);  
} 

input.addEventListener("change", function (evt) { 

    for (var i=0, j=this.files.length; i<j; i++) { 
     file = this.files[i]; 

     formdata = new FormData();   
     formdata.append("images[]", file); 

     var xhr = new XMLHttpRequest(); 
      xhr.id = "progress_" + Math.floor((Math.random() * 100000)); 
      xhr.addEventListener("loadstart", function(e){ 
       showUploadedItem(file, xhr.id); 
      });/*   
      xhr.addEventListener('progress', function(e) { 

      }, false);*/ 
      xhr.upload.onprogress = function(e) { 
       var done = e.position || e.loaded, total = e.totalSize || e.total; 
       $("#" + xhr.id).attr('value', Math.floor((e.loaded/e.total) * 100)) 
      }; 
      /*xhr.onreadystatechange = function(e) { 
       if (4 == this.readyState) { 
        console.log(['xhr upload complete', e]); 
       } 
      };*/ 
      xhr.open('post', 'upload.php', true); 
      xhr.send(formdata); 

    } 

}, false);}());

我的PHP代碼：

foreach ($_FILES["images"]["error"] as $key => $error) { 
if ($error == UPLOAD_ERR_OK) { 
    $name = $_FILES["images"]["name"][$key]; 
    move_uploaded_file($_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]); 
}} echo "<h2>Successfully</h2>";

我的HTML;

<div id="main"> 
    <div style="padding-bottom:10px"> 
     <input type="file" name="images" id="images" multiple /> 
    </div> 

    <ul id="image-list"></ul> 
    <br style="clear:both"> 
</div>

來源

2013-05-28 Maicon

你有一個封閉的問題，使用this代替xhr指在事件回調當前XMLHttpRequest對象;

function(e){ 
    showUploadedItem(file, this.id); 
}); 
function(e) { 
    var done = e.position || e.loaded, total = e.totalSize || e.total; 
    $("#" + this.id).attr('value', Math.floor((e.loaded/e.total) * 100)) 
}

來源

2013-05-28 02:08:37 Musa

對我不起作用，也許我不是很容易看到我的代碼; http://pastebin.com/7C32095e – Maicon

我做到了！感謝提示，我的解決方案; http://pastebin.com/rjiyTwMJ – Maicon

HTML5文件上傳與多個進度

回答

相關問題