Загрузка изображения Chrome не работает; другие браузеры прекрасны

Question

Недавно мы реализовали способность наших участников загружать изображение. Он работал отлично в течение нескольких месяцев. Недавно он перестал работать в Chrome, но продолжает работать в Firefox, Safari и Internet Explorer.

сообщение об ошибке, что Chrome является порождающим выглядит следующим образом:

Uncaught TypeError: Не удалось установить свойство «файлы» на «HTMLInputElement»: Указанное значение не типа «FileList».

раздел кода, который испытывает проблемы заключается в следующем: появляется сообщение

$(window).load(function() 
    { 
     var aFiletypesAllowed = ["png","gif","jpeg","jpg"]; 
     var FileTypesPrintable = 'png, gif, jpeg, jpg"'; 
     var form = document.getElementById('image-submit'); 
     var options = 
     { 
      thumbBox: '.thumbBox', 
      imgSrc: '' 
     } 
     var cropper = $('.imageBox').cropbox(options); 
     $('#file').on('change', function() 
     { 
      var reader = new FileReader(); 
      reader.onload = function(e) 
      { 
       options.imgSrc = e.target.result; 
       cropper = $('.imageBox').cropbox(options); 
      } 
      reader.readAsDataURL(this.files[0]); 
      this.files = []; 
      fileSize = this.files[0].size; 
      fileName = this.value; 
     }) 
     $('#btnCrop').on('click', function() 
     { 
      //file validation 
      var filetype = fileName.split('.').pop().toLowerCase(); 
      fileWidth = cropper.getWidth(); 
      fileHeight = cropper.getHeight(); 

      //check file type 
      if (aFiletypesAllowed.indexOf(filetype) < 0) 
      { 
       var filenameUsed = fileName.split('\\').pop(); 
       jConfirm('Invalid Filetype', filenameUsed + ' is not an allowed file type. Allowed filetypes are ' + FileTypesPrintable, '', '', '', '', '', '', '', '', 180); 
       document.getElementById('file').value = ''; 
      } 
      //check image dimensions -- at least one dimension must be over the limit to ensure a crop occurs, and the image is modified in some way 
      else if (fileWidth < 200 && fileHeight < 200) 
      { 
       jConfirm('Image too Small', 'Minimum allowed image size is 200 x 200. Your image is ' + fileWidth + ' x ' + fileHeight + '. Please choose a larger image.', '', '', '', '', '', '', '', '', 180); 
       document.getElementById('file').value = ''; 
      } 
      //validation passed, perform crop 
      else 
      { 
       var img = cropper.getDataURL(); 
       $('.cropped').html('<img id="cropped-img" src="'+img+'">'); //image to display 
       $('#cropped-to-send').val(img); //dataURL to upload 
      } 
     }) 

Ошибка быть порождена строки кода «this.files = [];». После этой ошибки другая ошибка вызывается строкой «var filetype = fileName.split ('.'). Pop(). ToLowerCase();". Ошибка в этой строке «fileName не определена».

Как указано выше, эта функция работает в течение нескольких месяцев в Chrome и продолжает отлично работать в Firefox, Safari и Internet Explorer.

Answer 1

Я действительно не понимаю, как эта функция работает, потому что она была реализована другим программистом на основе библиотеки. Однако, проверяя код, одна строка «this.files = [];» представляется проблематичным. Это инициализирует пустой массив; то следующие две строки пытаются получить доступ к элементам этого массива для последующего использования. Конечно, они будут пусты.

Так что на догадках я перестроил порядок некоторых линий. Строки из приведенного выше кода заключаются в следующем:

reader.readAsDataURL(this.files[0]); 
this.files = []; 
fileSize = this.files[0].size; 
fileName = this.value; 

я вновь расставил их следующим образом:

reader.readAsDataURL(this.files[0]); 
fileSize = this.files[0].size; 
fileName = this.value; 
this.files = []; 

Для меня функция этих строк следующим образом:

1. выполнять данные считываются;
2. присвоить некоторые значения
3. набор this.files пустой массив

После этого, функция теперь, кажется, правильно работать в Chrome.

Теперь мой вопрос больше похож: почему он вообще работал в любом браузере? Кажется, что очистка массива, тогда попытка использовать массив обречена.

И вторая тайна - почему он работал в течение нескольких месяцев? Я подтвердил, что этот конкретный код не изменился в этот период.

Answer 2

У меня была аналогичная проблема. Удаление строки this.files = []; швов для исправления ошибки, и поскольку reader.readAsDataURL(this.files[0]); уже вызван, я не думаю, что это навредит загрузке файла. Я думаю, что ошибка возникает из-за того, что она ожидает значения типа FileList, но не соответствует []