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

Question

对于 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 是空的？

原文由 Alimon Karim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Rajinweb 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

另请查看 其他 Google 规则。

原文由 Rodrirokr 发布，翻译遵循 CC BY-SA 4.0 许可协议