Question

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

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

任何帮助将不胜感激

Answer 1

您正在调用自定义函数：

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

此函数需要将文件输入更改事件的Event对象实例作为其第一个且唯一的参数传递。您未在 onclick 处理程序中传递此参数 e1

 onclick="aFileIsLoaded()">

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

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

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

有关活动的更多信息

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

在尝试访问<input />文件时，无法读取未定义的属性“target”

1 个答案: