web-dev-qa-db-fra.com

document.querySelector (...) est une erreur nulle

Pour le téléchargement d’image dans un projet cakephp, j’utilisais Java-script.J'ai ajouté ce fichier js dans app\View\Layouts default.ctp 

code 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 = '';

J'ai vérifié qu'il n'y avait pas de problème.

maintenant dans le fichier add.ctp I additionneur 

<input type="file" multiple />

En sortie, je vois le type de fichier field.Maintenant, lorsque j'ai cliqué sur ce champ et que j'ai téléchargé une image, un bogue Mojila m’a donné une erreur. 

document.querySelector (...) est une erreur nulle 

Je n'ai aucune idée de cette erreur. Dans ce cas, pourquoi dire queryselector est null?

javascriptcakephp
16
Alimon Karim

document.querySelector() se comporte de la même manière que la méthode jQuery.(document).ready(). Lorsque le DOM est prêt, le sélecteur renvoie l'objet.

Je vous suggère d'appeler tous les scripts JS au bas de la page.

30
Rajinweb

Pour vous assurer que votre DOM est prêt, vous pouvez l'ajouter à votre fichier 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){
            ...
         }
});

De cette façon, vous pouvez appeler vos fichiers js où que vous soyez. S'il vous plaît jetez un oeil à cette réponse superbe pour obtenir plus de perspicacité sur ces questions.

Jetez également un coup d'œil à cette autre règle de Google . 

1
Rodrirokr