document.querySelector(...) 为空错误

IT技术 javascript
2021-03-21 23:13:44

对于 cakephp 项目中的图像上传，我使用了 java-script。我在 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 = '';

我检查过没有问题。

现在在 add.ctp 文件中我加法 

<input type="file" multiple />

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

document.querySelector(...) 为空错误

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

6个回答

document.querySelector()行为与jQuery.(document).ready()方法类似。当 DOM 准备好时，选择器返回对象。

我建议你调用页面底部的所有 JS 脚本。

最好的方法是<head>使用 async 或 defer 属性将所有脚本调用放在标签中。这会在不阻止浏览器的情况下下载脚本文件。
2021-04-20 23:13:44
不同之处在于async只是将脚本作为非阻塞网络传输加载，但一旦检索到它就会立即执行，而defer属性没有说明如何加载脚本，但不会立即执行它，而是在 DOM 之后执行它已被解析（但在调度 DOMContentLoaded 事件之前）。在跨浏览器支持方面，两者都从 IE 10 开始得到普遍支持。
2021-04-25 23:13:44
对于使用Vue3的ppl，把它放在里面 onMounted()
2021-05-08 23:13:44

为了确保您的 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 文件。请查看这个极好的答案，以进一步了解这些问题。

也看看这个其他的谷歌规则。

我建议<script type="text/javascript" src="your js file"></script>在结束标签之前写下你的正文

现在有另一种“更好”的方法来解决这个问题。

将您的脚本放在 head 标签中并添加 defer 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="main.js" defer></script>
</head>
<body>
  yoyoyo
</body>
</html>

你可以在这里和这里阅读更多关于它的信息

TLDR（可能不准确且具有误导性，因此请阅读上面的来源！）： defer 属性告诉浏览器加载文件，但在 dom 准备好之前推迟执行，这与放置脚本时隐含的行为很接近标签在 body 标签的底部，不同之处在于在旧的方式中你必须等待整个 body 标签被解析，直到你开始下载 script 标签。

file.js

const heading1 = document.querySelector(".heading1");
console.log(heading1);

方案一

使用defer （最佳和推荐方式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./file.js" defer></script>
    <title>Document</title>
</head>
<body>
    <h1 class="heading1">Hello World 1</h1>
</body>
</html>

解决方案2

在关闭body标签之前将你的 JavaScript 放在底部

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1 class="heading1">Hello World 1</h1>

    <script src="./file.js"></script>
</body>
</html>
其它你可能感兴趣的问题
上一篇如何使用带有 JSON 结果的 Ajax.BeginForm MVC 助手？ 下一篇JavaScript 访问字符串字符作为数组