尝试访问 <input> 文件时无法读取未定义的属性“目标”答案

【问题标题】：Cannot read property 'target' of undefined when trying to access <input> files尝试访问 <input> 文件时无法读取未定义的属性“目标”
【发布时间】：2012-09-27 19:23:39
【问题描述】：

我正在尝试更改文件上传图像以选择或单击此画布相关脚本中同一页面上的图像。

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
fr.onload = function(e2)
{
      backgroundimage = new Image();
      backgroundimage.src=e2.target.result;
     var context = document.getElementById('myCanvas').getContext('2d');
     context.canvas.width = backgroundimage.width;
     context.canvas.height = backgroundimage.height;
     context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);


};
    fr.readAsDataURL(filename);
}



window.onload=function(){
var s = document.getElementById("fontsize");
s.value="48";
document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
backgroundimagemode=NONE;
carpeInit();
update();
}

以前，这些图片是这样调用的，文件是从桌面选择的

<input type="file" name="back" id="loadpicture" src="myimage.png" >

现在我正在尝试在同一页面中加载图像：

<img src="myimage.png" name="back" id="loadpicture" onclick="aFileIsLoaded()">

但我收到此错误：

Uncaught TypeError: Cannot read property 'target' of undefined

任何帮助将不胜感激

【问题讨论】：

标签： javascript file-upload filereader

【解决方案1】：

您正在调用自定义函数：

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];

此函数期望文件输入更改事件的事件对象实例作为其第一个也是唯一的参数传递。您没有在 onclick 处理程序中传递此参数 e1

 onclick="aFileIsLoaded()">

解决方法是使用 DOM 查找来查找问题中的元素以读取其文件

 var filename = document.getElementById('loadpicture').files[0]

由于示例缺少 HTML 代码，因此答案可能不完整。

【讨论】：