10
Für das Hochladen von Bildern in einem CakePHP Projekt, das ich java-script.I verwendet hinzugefügt diese Datei in app \ View \ Layouts js default.ctpdocument.querySelector (...) ist null Fehler
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 = '';
Ich habe überprüft, es gibt kein Problem.
jetzt in add.ctp Datei Addierer I
<input type="file" multiple />
In Ausgang ich den Dateityp sehe field.Now wenn ich auf diesem Feld geklickt und lade ein Bild dann mojila Fehler gegeben ich ein error.That ist
document.querySelector (...) ist null Fehler
ich habe keine Ahnung von diesem error.In hier, warum sagen queryselector null ist?
Es heißt, es ist 'null', weil der Selektor, der an' document.querySelector() 'übergeben wurde, kein Element/Knoten zurückgibt, auf dem zu arbeiten ist. Können Sie überprüfen, ob das Element existiert? Wenn Sie Ihren relevanten (minimalen/[SSCCE] (http://sscce.org/)) HTML-Code posten können, können wir möglicherweise spezifischere Hilfe anbieten. –
Bedeutet es, dass es nicht gefunden wurde ? –
Ich meine, es wird kein Element gefunden, das mit dem CSS-Selektor übereinstimmt, den Sie ihm übergeben haben. Aber Sie haben es an zwei verschiedenen Stellen aufgerufen ('querySelector ('span.progress span');' und 'querySelector ('form div.photos')'), von denen keine versucht, eine Eingabe von * any * zu finden. 'Typ'. –