未捕获的类型错误:无法读取图像上传的空错误的属性“addEventListener”

Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload

本文关键字：错误 属性 addEventListener 图像 类型 读取      更新时间：2023-09-26

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

Uncaught TypeError: Cannot read property 'addEventListener' of null 11 号线

第 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)
        }
      }
    }
              });
               });

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

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

但实际 ID 是"上传图像"

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

将此行更改为：

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

如果它在本地主机上工作，请尝试以下操作：1. 在 Chrome 浏览器中打开您的网页2. 按 F123. 在开发者工具的控制台上，键入 document.getElementById（"upload"）;4.无论输出是什么，只需将鼠标光标移动到该元素上即可查看该元素在UI上的位置5. 对非本地主机环境重复相同的操作，并验证/调试问题所在。

这是一个简单的问题，我相信如果你摆弄调试器，你可以很容易地自己解决它。

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

getElementById在

找不到您要查找的元素时返回 null。尝试在 null 上调用函数将引发类似上述的错误。从上面看来，您没有 ID upload 的元素。

相关文章：