Javascript 未捕获类型错误：无法读取属性'；增补列表器'；上载图像时出现空错误

嗨，朋友，我在以下代码中遇到此错误：

Uncaught TypeError:无法读取第11行null的属性'addEventListener'

第11行是：

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

这是输入文件：

<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">

那是什么错误？在这方面有人能帮我吗？我正在使用此代码上载图像，但此错误不允许我

$(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)
        }
      }
    }
              });
               });

$（文档）.ready（函数（）
{
jQuery（函数（$）{
var fileDiv=document.getElementById（“上传”）；
var fileInput=document.getElementById（“上传图像”）；
log（fileInput）；
fileInput.addEventListener（“更改”，函数（e）{
var files=this.files
显示缩略图（文件）
}，错）
fileDiv.addEventListener（“单击”，函数（e）{
$（fileInput）.show（）.focus（）.click（）.hide（）；
e、 预防默认值（）；
}，错）
fileDiv.addEventListener（“dragenter”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
}，假）；
fileDiv.addEventListener（“dragover”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
}，假）；
fileDiv.addEventListener（“删除”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
var dt=数据传输；
var files=dt.files；
显示缩略图（文件）
}，假）；
函数显示缩略图（文件）{
for（var i=0；i
getElementById
在找不到您要查找的元素时返回null。尝试在null上调用函数将抛出类似于上面的错误。从上面看，您似乎没有ID为
upload
的元素和ID为“upload”的元素：

'var fileDiv = document.getElementById("upload");'

但实际id是“上传图像”


将此行更改为：

var fileDiv = document.getElementById("upload-image");

如果它在本地主机上工作，请尝试以下操作：
1.在chrome浏览器中打开您的页面
2.点击F12
3.在开发者工具的控制台上，键入document.getElementById（“上传”）；
4.无论输出是什么，只要将鼠标光标移到该输出上，即可查看该元素在UI上的位置
5.对非本地主机环境重复上述步骤，并验证/调试问题所在

这是一个简单的问题，我相信如果你摆弄调试器，你可以自己轻松地解决它。
我们还应该检查我们在标题中调用javascript文件的位置，或者在
页面的末尾是否有id上传的元素？这意味着
文件输入
为
null
。你为什么要使用
>.addEventListener（）
使用jQuery时？通过jQuery，您可以传递事件名称列表，并仅通过一个函数调用分配该处理程序。@Alexander id在我的问题中：
id=“upload image”
可能没有具有
id=upload
标记的元素。@Micheled'Amico但是在
localhost
中运行良好的函数，那么您将代码移动到的非localhost环境中没有具有该id的元素。
var fileDiv = document.getElementById("upload-image");