javascript - 未捕获的类型错误 : Cannot read property 'addEventListener' of null error for image upload

Question

嗨， friend 们，我在以下代码中遇到了这个错误:

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

Answer 1

您的代码正在寻找 ID 为“上传”的元素:

'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");

如果它在本地主机上工作，那么试试这个:1.在chrome浏览器中打开你的页面2.按F123. 在开发者工具的控制台，输入 document.getElementById("upload");4. 无论输出是什么，只需将鼠标光标移到它上面即可查看该元素在 UI 上的位置5. 对非本地主机环境重复相同的操作并验证/调试问题出在哪里。

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