大きな画像をBase64にエンコードすると機能しません

Question

私は、画像をサーバーにbase64文字列形式で投稿する簡単なフォームを使用しています。小さな画像（< 500kb）をアップロードすると、.jpgファイルと.pngファイルに完全に対応します。

は、HTML：：

​​

JS：あなたが意図的

function encodeImageFileAsURL() { 
    var filesSelected = document.getElementById("foto").files; 
    var filename = document.getElementById("foto").value; 

    var regex = /.*\\(.*)/; 
    var match = regex.exec(filename); 

    filename = match[1]; 

    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 
     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) { 
      var srcData = fileLoadedEvent.target.result; // <--- data: base64 

      alert(srcData); 

      $.ajax({ 
       type: 'POST', 
       url: '/upload/' + filename, 
       data: srcData, 
       dataType: "text", 
       contentType:"text/plain" 
      }); 
     } 

     fileReader.readAsDataURL(fileToLoad); 
    } 
} 

Answer 1

をしようとしていますサイズは、例えば4メガバイトであるとき、関数は何もしません。しかし、でも警告を印刷しません。 2つのHTTP POST操作を行うには？ <input type="submit">があるので、JS関数がHTTPフォームを返すと、POSTが実行され、あなたはオフになります。 <input type="button">に変更すると、フォームによってポストが実行されず、デバッグを開始できるはずです。

また、数メガバイトの大きさのbase64エンコードされたイメージを警告しようとすると、何が起きるか分かりません。

私はこれにあなたの例を下にペアリングすることによって成功を収めました：ボタンで

function encodeImageFileAsURL() { 
    var filesSelected = document.getElementById("foto").files; 

    var file = filesSelected[0]; 

    var reader = new FileReader(); 

    reader.onload = (function (f) { 
     return function (e) { 
      alert('***got here***'); 
     }; 
    })(file); 

    reader.readAsDataURL(file); 
} 

は提出し、ボタンを入力しないように変更。