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文件上传与多个进度

回答

相关问题