Question

对于cakephp项目中的图片上传我使用了java-script.I在app \ View \ Layouts中添加了这个js文件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文件中我加法

<input type="file" multiple />

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

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

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

Answer 1

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

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

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文件。请查看this superb answer，以进一步了解这些问题。

还可以查看this other Google rule。

Answer 3

我建议在结束标记之前在正文中写上<script type="text/javascript" src="your js file"></script>

Answer 4

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

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

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

您可以阅读有关它的更多信息here 和 here

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

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

4 个答案: