document.querySelector（...）为null错误 [英] document.querySelector(...) is null error

问题描述

对于cakephp项目中的图片上传我使用了java-script.I在app \View \Layouts中添加了这个js文件default.ctp

For image upload in a cakephp project I used java-script.I added this js file in app\View\Layouts default.ctp

js code

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文件中我加法

now in add.ctp file I adder

<input type="file" multiple />

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

In output I am seeing the file type field.Now when I clicked on this field and upload a image then mojila bug given me a error.That is

document.querySelector（...）为空错误

document.querySelector(...) is null error

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

I have no idea about this error.In here why saying queryselector is null?

推荐答案

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

document.querySelector() behaves similarly to the jQuery.(document).ready() method. When the DOM is ready, the selector returns the object.

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

I would suggest you call all JS script bottom of the page.

这篇关于document.querySelector（...）为null错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！