将大小和名称传递给 JavaScript 的 FileHandler 的 .onload 事件答案

【问题标题】：Pass size and name to the .onload event of JavaScript's FileHandler将大小和名称传递给 JavaScript 的 FileHandler 的 .onload 事件
【发布时间】：2014-08-15 15:52:33
【问题描述】：

如何将文件的名称和大小传递给 JavaScript 的 FileHandler 的 .onload 事件。如您所见，我在下面的 Ajax 调用中使用了（仍未声明的）变量 size 和 name。但是，我必须以某种方式从getData() 函数中传递它们。

我找到了Pass a parameter to FileReader onload event，但它似乎对我不起作用。

getData('file2093', 
  function(e) { 
    new Ajax.Request('/documents/2093', { 
      asynchronous:true, evalScripts:true, method:'patch', parameters:'document_payload=' + btoa(e.target.result) + '&amp;document_filename=' + btoa(name) + '&amp;document_size=' + btoa(size) 
      }); 
  })

function getData(inputField, onLoadCallback){
    var input = document.getElementById(inputField);
    var file = input.files[0];
    var size = file.size;
    var name = file.name;
    var fr = new FileReader();
    fr.onload = onLoadCallback
    fr.readAsDataURL(file);
}

【问题讨论】：

标签： javascript filehandler

【解决方案1】：

使用bind，将第一个参数之后的参数与函数调用期间传递的任何其他参数一起传递给被调用函数。

getData('',function(size,name,e){
...
});
...
fr.onload = onLoadCallback.bind(fr,size,name);

否则将 onload 设置为调用回调的匿名函数

fr.onload = function(e){
  onLoadCallback(size,name,e);
};

如果您需要访问读取器对象，请在第二个 sn-p 中传递文件读取器对象，第一个 sn-p 设置回调函数的上下文，以便您可以通过回调中的this 访问读取器对象

【讨论】：