Chromeのアップロード画像はもう機能しません。他のブラウザは大丈夫です

Question

最近、メンバーが画像をアップロードする機能を実装しました。数ヶ月間うまくいっています。最近、Chromeでの作業は中止されましたが、Firefox、Safari、Internet Explorerでは引き続き動作します。

次のようにクロムが生成されていることをエラーメッセージは次のとおりです。

キャッチされない例外TypeError：「HTMLInputElementの」オン「ファイル」プロパティを設定できませんでした：指定された値がタイプでない「ファイルリスト」。

次のように問題を有するされたコードセクションがある：

$(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

ライブラリに基づいて別のプログラマによって実装されたため、この関数の動作を実際に理解できません。しかし、コードを調べているうちに、1行の "this.files = [];"問題があるようです。空の配列が初期化されます。次の2行は後で使用するためにその配列の要素にアクセスしようとします。もちろん、それらは空になります。

私は勘違いして、いくつかの行の順序を並べ替えました。次のように上記のコードからの行は、次のとおりです。

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

I再配置し、それらを次のように

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

を私に次のようにこれらの行の機能は次のとおりです。

1. を行いますデータを読み取る。
2. これを実行した後、空の配列

にいくつかの値

セットthis.filesを割り当て、機能は現在、Chromeで適切に動作するように見えます。

私の質問はもっと似ています：なぜ以前にブラウザで動作していたのですか？配列をクリアしてから、配列を使用しようとしたようです。

2番目の謎はなぜ数ヶ月間働いたのですか？この特定のコードがその期間に変更されていないことを確認しました。

Answer 2

同様の問題がありました。 this.files = [];の継ぎ目を取り除いてエラーを修正してください。reader.readAsDataURL(this.files[0]);が既に呼び出されているので、ファイルのアップロードに大きな害を与えるとは思われません。私は、FileList型の値を期待しているが[]と一致しないためにエラーが発生したと思います。