Javascript 未捕获的类型错误：无法读取图像上传的 null 错误的属性“addEventListener”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27713100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload
提问by innovation
Hi friends i am getting this error in following code:
嗨，朋友，我在以下代码中收到此错误：
Uncaught TypeError: Cannot read property 'addEventListener' of nullon line 11
Uncaught TypeError: Cannot read property 'addEventListener' of null在第 11 行
The line 11 is:
第 11 行是：
fileDiv.addEventListener("click",function(e){
$(fileInput).show().focus().click().hide();
e.preventDefault();
},false)
This is input file:
这是输入文件：
<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">
In this code error on line 5:
在第 5 行的此代码错误中：
console.log(fileInput);
fileInput.addEventListener("change",function(e){
var files = this.files
showThumbnail(files)
},false)
What is that error? Anyone can help me in this regard ? I am using this code for image upload but this error will not allow me!!
那是什么错误？任何人都可以在这方面帮助我吗？我正在使用此代码上传图片，但此错误不允许我！！
$(document).ready(function()
{
jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
var files = this.files
showThumbnail(files)
},false)
fileDiv.addEventListener("click",function(e){
$(fileInput).show().focus().click().hide();
e.preventDefault();
},false)
fileDiv.addEventListener("dragenter",function(e){
e.stopPropagation();
e.preventDefault();
},false);
fileDiv.addEventListener("dragover",function(e){
e.stopPropagation();
e.preventDefault();
},false);
fileDiv.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
showThumbnail(files)
},false);
function showThumbnail(files){
for(var i=0;i<files.length;i++){
var file = files[i]
var imageType = /image.*/
if(!file.type.match(imageType)){
console.log("Not an Image");
continue;
}
var image = document.createElement("img");
// image.classList.add("")
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload= function(){
ctx.drawImage(image,100,100)
}
}
}
});
});
回答by TechMaze
Your code is looking for and element with ID 'upload':
您的代码正在寻找 ID 为“上传”的元素：
'var fileDiv = document.getElementById("upload");'
but the actual id is 'upload-image'
但实际 ID 是“上传图片”
<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">
<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">
Change your this line to:
将此行更改为：
var fileDiv = document.getElementById("upload-image");
If it is working on localhost, then try this: 1. open your page in chrome browser 2. hit F12 3. on console of developer tool, type document.getElementById("upload"); 4. Whatever is the output just move your mouse cursor on that to see where is that element on UI 5. Repeat same with non localhost environment and verify/debug where is the problem.
如果它在本地主机上工作，那么试试这个： 1. 在 Chrome 浏览器中打开你的页面 2. 按 F12 3. 在开发者工具的控制台上，输入 document.getElementById("upload"); 4. 无论输出是什么，只需将鼠标光标移到该元素上即可查看该元素在 UI 上的位置 5. 在非本地主机环境中重复相同的操作并验证/调试问题出在哪里。
This is to simple a problem and I am sure if you fiddle with debugger you can solve it yourself easily.
这是一个简单的问题，我相信如果您摆弄调试器，您可以轻松解决它。
回答by AB Abhi
We should also check where are we calling the javascript file in header or in the end of the <body>
我们还应该检查我们在哪里调用 javascript 文件在标题或末尾 <body>
回答by Art McBain
getElementByIdreturns null when it can't find the element you're looking for. Trying to call functions on null will throw an error like the above. It seems just from the above that you do not have element with the ID upload.
getElementById当找不到您要查找的元素时返回 null。尝试在 null 上调用函数会抛出类似上面的错误。从上面看来，您没有带有 ID 的元素upload。
