未捕获的TypeError：无法读取图像上载的null错误属性'addEventListener'

Question

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

Uncaught TypeError: Cannot read property 'addEventListener' of null在第11行Uncaught TypeError: Cannot read property 'addEventListener' of null

第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">

在第5行的代码错误中：

console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

这个错误是什么？ 谁能在这方面帮助我？ 我正在使用此代码进行图片上传，但此错误不允许我！

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

Answer 1

您的代码正在寻找ID为'upload'的元素：

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

但实际的ID是'upload-image'

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

将此行更改为：

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

如果它在localhost上工作，那么试试这个：1。在chrome浏览器中打开你的页面2.点击F12 3.在开发者工具的控制台上，键入document.getElementById（“upload”）; 4.无论输出是什么，只需将鼠标光标移动到该位置即可查看UI 5上该元素的位置。对非本地主机环境重复此操作并验证/调试问题所在。

这是一个简单的问题，我相信如果您使用调试器，您可以轻松地自己解决它。

Answer 2

我们还应该检查我们在标头或<body>的末尾调用javascript文件的位置

Answer 3

当getElementById找不到您要查找的元素时，它返回null。 试图在null上调用函数会抛出如上所述的错误。 从上面看来，您没有ID upload元素。

未捕获的TypeError：无法读取图像上载的null错误属性'addEventListener'

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-12-30 23:26:49

解决方案2
1 2017-10-18 11:55:51

解决方案3
0 2014-12-30 21:56:13

未捕获的TypeError：无法读取图像上载的null错误属性&#39;addEventListener&#39;

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-12-30 23:26:49

解决方案2 1 2017-10-18 11:55:51

解决方案3 0 2014-12-30 21:56:13

未捕获的TypeError：无法读取图像上载的null错误属性'addEventListener'

解决方案1
2 已采纳 2014-12-30 23:26:49

解决方案2
1 2017-10-18 11:55:51

解决方案3
0 2014-12-30 21:56:13