10
Per il caricamento di immagini in un progetto CakePHP ho usato java-script.I aggiunto questo js file in app \ Visualizza \ Layouts default.ctp codicedocument.querySelector (...) è l'errore nullo
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 = '';
Ho controllato che non ci sono problemi.
ora nel file di add.ctp I Adder
<input type="file" multiple />
In uscita sto vedendo il tipo di file field.Now quando ho cliccato su questo campo e caricare un'immagine poi mojila bug dato me un error.That è
document.querySelector (...) è l'errore nullo
non ho idea su questo error.In qui perché dicendo queryselector è nullo?
Sta dicendo che è 'null' perché il selettore passato a' document.querySelector() 'non restituisce un elemento/nodo su cui lavorare. Puoi verificare che l'elemento esista? Se puoi pubblicare il tuo codice HTML rilevante (minimo/[SSCCE] (http://sscce.org/)), potremmo essere in grado di fornire un aiuto più specifico. –
Significa che non è stato trovato ? –
Voglio dire che non sta trovando un elemento che è stato abbinato dal selettore CSS che hai passato ad esso. Ma lo hai chiamato in due posti separati ('querySelector ('span.progress span');' e 'querySelector ('form div.photos')'), nessuno dei quali sta cercando di trovare un input di * any * 'type'. –