FileReader.onloadは時間内に成功しません

Question

イメージファイルのストリームを取得してasp.netのようなバックグラウンドに渡したいのですが、onloadイベントを発生させるたびに、プログラミングが成功した後に必ず達成されます。

私はそれを防ぐためにsetTimeoutを使用して、それを処理して成功させようとしましたが、失敗しました。 以下のコメントはどのステップが失敗したかを説明しています。

$("#goodsImage").change(function (e) { 
     if ($("#goodsImage").val() == "") 
     { 
      alert("please choose the image you want to upload"); 
      return; 
     } 

     var filepath = $("#goodsImage").val(); 

     //$("#goodsImage").val(); 
     var extStart=filepath.lastIndexOf("."); 
     var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 
     if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){ 
      alert("only images could be uploaded"); 
      return; 
     } 
     readFile(e.target.files[0]); 
     setTimeout(function() { 
      //I want to use setTimeOut to delay it 
     }, 1000); 


     //always undefined!!! 
     if ($("#hidImageStream").val() != "") 
     { 
      $.post("@Url.Action("UploadGoodImage")", { localPath: readerRs }, function (e) 
      { 
       if (e) { 
        $("#ImagePreviewUrl").val(e.data); 
       } 
       else { 

       } 
      }); 
     } 



    }); 

    function readFile(file) { 
     var reader = new FileReader(); 
     reader.onload = readSuccess; 

     //always success after post request accomplished. 
     function readSuccess(evt) { 

      document.getElementById("hidImageStream"). 
       value = evt.target.result; 

     }; 
     reader.readAsText(file); 
    } 

Answer 1

もreadAsTextとしてファイルを読み込み、いくつかのヒント

<-- use accept and only allow image mimetype. It can accept extension to --> 
<input type="file" name="pic" accept="image/*"> 

• あるバイナリのための恐ろしい考えです。 （私はあなたがbase64に変わったのを見ました）。
• readAsDataURLは、アップロードが3倍大きく、CPU /メモリがさらに必要なため、それほど大嫌いではありません。
• ファイル名をスプーフィングすることはとても最高で、それはあなたがonloadイベント発生しません画像

$("#goodsImage").change(function() { 
    // We use `this` to access the DOM element instead of target 
    for (let file of this.files) { 
     // Test if it's a image instead of looking at the filename 
     let img = new image 
     img.onload =() => { 
      // Success it's a image 
      // upload file 
      let fd = new FormData 
      fd.append('file', file) 

      $.ajax({ 
       url: 'http://example.com', 
       data: fd, 
       processData: false, // so jquery can handle FormData 
       type: 'POST', 
       success: function(data) { 
        alert(data) 
       } 
      }) 
     } 

     img.onerror =() => { 
      // only images dude 
     } 

     img.src = URL.createObjectURL(file) 
    } 
}) 

Answer 2

私は質問を解決しました。ポストリクエストをオンロードされたファンクションに入れてください。ここ

function readFile(file) { 
     var reader = new FileReader(); 
     reader.onloadend = readSuccess; 
     //reader.onloadend = function (e) { 
     // console.log(e.target.result); 
     //}; 

     function readSuccess(evt) { 
      $.post("@Url.Action("UploadGoodImage")", { localPath: evt.target.result}, function (e) { 
      if (e.IsSuccess) { 
       $("#ImagePreviewUrl").val(e.data); 
      } 
      else { 
       alert("Fail！"); 
      } 

     }); 
     } 
     reader.readAsDataURL(file); 
    }