Javascript document.querySelector（…）为空错误

对于cakephp项目中的图像上载，我使用java脚本。我在app\View\Layouts default.ctp中添加了这个js文件

js代码

document.querySelector('input[type=file]').addEventListener('change', function(event){

  var files = event.target.files;

  for (var i = 0; i < files.length; i++) {

    if (files[i].type.match(/image.*/)) {

        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                var imageElement = document.createElement('div');
                imageElement.classList.add('uploading');
                imageElement.innerHTML = '<span class="progress"><span></span></span>';
                var progressElement = imageElement.querySelector('span.progress span');
                progressElement.style.width = 0;
                document.querySelector('form div.photos').appendChild(imageElement);


                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                var xhr = new XMLHttpRequest();
                if (xhr.upload) {

                    // Update progress
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = parseInt(event.loaded / event.total * 100);
                        progressElement.style.width = percent+'%';
                    }, false);


                    xhr.onreadystatechange = function(event) {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {

                                imageElement.classList.remove('uploading');
                                imageElement.classList.add('uploaded');
                                imageElement.style.backgroundImage = 'url('+xhr.responseText+')';

                                console.log('Image uploaded: '+xhr.responseText);

                            } else {
                                imageElement.parentNode.removeChild(imageElement);
                            }
                        }
                    }

                    xhr.open('post', 'process.php', true);
                    xhr.send(canvas.toDataURL('image/jpeg'));

                }

            }

            image.src = readerEvent.target.result;

        }
        reader.readAsDataURL(files[i]);
    }

}

event.target.value = '';

document.querySelector（'input[type=file]'）。addEventListener（'change'，函数（事件）{
var files=event.target.files；
对于（var i=0；i高度）{
如果（宽度>最大尺寸）{
高度*=最大尺寸/宽度；
宽度=最大尺寸；
}
}否则{
如果（高度>最大尺寸）{
宽度*=最大尺寸/高度；
高度=最大尺寸；
}
}
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（'2d'）.drawImage（图像，0，0，宽度，高度）；
var xhr=new XMLHttpRequest（）；
if（xhr.upload）{
//更新进度
xhr.upload.addEventListener（'progress'，函数（事件）{
var percent=parseInt（event.loaded/event.total*100）；
progressElement.style.width=百分比+'%'；
}，假）；
xhr.onreadystatechange=函数（事件）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
imageElement.classList.remove（'Upload'）；
imageElement.classList.add（'Upload'）；
imageElement.style.backgroundImage='url（'+xhr.responseText+'）；
console.log（'上传图像：'+xhr.responseText）；
}否则{
imageElement.parentNode.removeChild（imageElement）；
}
}
}
open（'post'，'process.php'，true）；
send（canvas.toDataURL（'image/jpeg'）；
}
}
image.src=readerEvent.target.result；
}
reader.readAsDataURL（文件[i]）；
}
}
event.target.value=''；

我已经检查过了，没有问题

现在在add.ctp文件I adder中

<input type="file" multiple />

在输出中，我看到了文件类型字段。现在，当我点击该字段并上传图像时，mojila bug给了我一个错误。这就是

document.querySelector（…）为空错误

---

我不知道这个错误。在这里为什么说queryselector为null？

文档。queryselector（）

的行为类似于jQuery.（document）.ready（）方法。当DOM就绪时，选择器返回对象

---

我建议您在页面底部调用所有JS脚本。

为了确保您的DOM已准备就绪，您可以将其添加到JS文件中

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.querySelector('input[type=file]')
        .addEventListener('change', function(event){
            ...
         }
});

通过这种方式，你可以从任何你喜欢的地方调用你的js文件。请查看以获得关于这些问题的进一步见解

---

另请看。

我建议将您的

写在正文中，在结束标记之前

它表示它为

null

，因为传递给

document.querySelector（）

的选择器没有返回要在其上工作的元素/节点。您可以验证元素是否存在吗？如果您可以发布相关的（最小/）HTML，那么我们可能可以提供更具体的帮助。你是说它没有找到吗？我是说它没有找到与你传递给它的CSS选择器匹配的元素。但是你在两个不同的地方调用了它（

querySelector（'span.progress span'）；

和

querySelector（'form div.photos'）

），两者都没有试图找到任何类型的输入。我只是编辑了问题的格式。代码中缺少第一行。这是您要查找的选项，@DavidThomas。好吧，准确地计算出哪一行产生了错误，那是（至少一行）导致错误。如果找不到元素，则是因为选择器错误，或者JavaScript运行点不存在元素。最好的方法是使用async或defer属性将所有脚本调用放入

标记中。这将下载脚本文件而不阻塞浏览器。使用不同之处在于，

async

仅将脚本作为非阻塞网络传输加载，但在检索后将立即执行，而

defer

属性没有说明如何加载脚本，但不会立即执行，而是在解析DOM后执行（但在发送DOMContentLoaded事件之前）。就跨浏览器支持而言，自IE 10以来，两者都得到了普遍支持。