document.querySelector (...) Ben java-script.I bu default.ctp app \ Görünüm \ Layouts'taki</p> <p>js kodu dosyasını js eklendi kullanılan bir CakePHP'de projesinde resim yüklemesi için boş hata

Question

olduğunu

Ben kontrol ettikten

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

hiçbir sorun yoktur.

şimdi add.ctp dosyasında ben o zaman mojila hata benim bir error.That edilir verilen bir görüntü bu alanda tıkladım ve yüklediğinizde field.Now ben dosya türünü görüyorum çıktısında

<input type="file" multiple /> 

toplayıcısına

document.querySelector (...) burada bu error.In hakkında hiçbir fikrim yok neden queryselector boş olduğunu söyleyerek boş hata

mı? jQuery.(document).ready() yöntemle gibi ve ne zaman DOM hazır sonra vites nesnesi döndüren aynı

Answer 1

document.querySelector() behavea.

Ben sayfanın tüm JS komut taban yapacağı öneririm.