如何將附加參數傳遞給javascript事件對象？

Question

我正在使用HTML 5 FileReader異步讀取更多的一個文件。

我想跟蹤單個文件的加載，因爲可以一次添加多個文件。

現在我爲每個圖像創建了背景爲0％的div，但我不清楚如何在onprogress事件中傳遞此分區的ID或引用，以便我可以跟蹤進度並動態更新div內容。

簡單地說，讓我知道如何確保我正在更新與文件相關的正確進度控制，同時上傳多個文件？我沒有得到我的JS權利。作爲形成一個閉合

var up_file = document.getElementById('multiple_file'); 
     if(up_file.files) 
     { 
      for(var x=0; x <up_file.files.length; x++) 
      { 
       //console.log(up_file.files.length); 
       var file = up_file.files[x]; 

       var loadingDiv = document.createElement("div"); 
       var container = document.getElementById('loading_container'); 

       loadingDiv.className = "loading"; 
       loadingDiv.id ="loading_" + x; 
       loadingDiv.innerHTML = '0%'; 
       container.appendChild(loadingDiv); 


       var reader = new FileReader(); 

       reader.onprogress = function (evt) { 
        if (evt.lengthComputable) { 
        console.dir(evt); 
        // evt.loaded and evt.total are ProgressEvent properties 
        var loaded = (evt.loaded/evt.total); 
        if (loaded < 1) { 
         console.log(loaded); 
        } 
        } 
       } 

       var img = document.createElement("img"); 
       img.className = "hide"; 
       reader.onload = (function(aimg) { 
        return function(e) { 
         LIB.addEvent(aimg, "load", function(){ 
          var scale = 1; 
          scale = aimg.width/200; 
          aimg.width = aimg.width/scale; 
          aimg.className = "show"; 
         }, false); 
         aimg.src = e.target.result; 
         var li = document.createElement("li"); 
         li.appendChild(aimg); 
         document.getElementById('img_packet').appendChild(li); 
        }; 
       })(img); 
       reader.readAsDataURL(file); 
      } 
     } 

Answer 1

loadingDiv仍是onprogress函數內可見。問題在於它處於循環狀態，因此在調用onprogress時，loadingDiv可能會被分配一個新值。

要解決這個問題，你可以使用一個額外的封閉採取loadingDiv當前值的副本：

reader.onprogress= function(myloadingdiv) { 
    return function(evt) { 
     if (evt.lengthComputable) 
      myloadingdiv.innerHTML= evt.loaded/evt.total*100+'%'; 
    }; 
}(loadingDiv); 

在ECMAScript中第五版，該bind()方法可以實現這個要求更乾淨：

reader.onprogress= function(myloadingdiv, evt) { 
    if (evt.lengthComputable) 
     myloadingdiv.innerHTML= evt.loaded/evt.total*100+'%'; 
}.bind(loadingDiv); 

對於不支持bind()但瀏覽器，你可以在執行修補這樣的：

if (!('bind' in Function.prototype)) { 
    Function.prototype.bind= function(owner) { 
     var that= this; 
     if (arguments.length<=1) { 
      return function() { 
       return that.apply(owner, arguments); 
      }; 
     } else { 
      var args= Array.prototype.slice.call(arguments, 1); 
      return function() { 
       return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments))); 
      }; 
     } 
    }; 
}