1

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

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

任何帮助将不胜感激

4

1 回答 1

2

您正在调用自定义函数：

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

于 2012-09-28T00:43:38.937 回答