아약스 파일 게시물 : 자동을 FileReader를 통해

Question

을 base64로 데이터를 보낼 수 없습니다 내가 수동으로 이렇게하면 내가 얻을 그림

Reader.readAsDataURL($('#foto')[0].files[0]) 

$.post('update.php', { foto: Reader.result }, function(resp) { console.log(resp) }); 

업데이트하지만 코드가 작동하지 않습니다!

  $('#fotoOk').click(function() { 
       var ok = true; 
       var s = $('#foto').val().split('.'); 
       var ext = s[s.length-1]; 
       if (!ext.match(/(jpg|jpeg|png|gif)/i)) { 
       ok = false; 
       console.log('bad ext'); 
       $('#errFoto').html('bad avatar!'); 
       } 
       else if ($('#foto')[0].files.item(0).size > (1024 * 1024 * 5)) { 
       console.log('too big'); 
       ok = false; 
       $('#errFoto').html('Avatar file is too big!');     
       } 

       if (ok) { 
       if (!Reader) Reader = new FileReader(); 
       Reader.readAsDataURL($('#foto')[0].files[0]); 
       console.log(Reader.result); 
       $.post("update.php", { foto: Reader.result }); 
       $('#errFoto').html(''); 
       $('#avt').attr('src', Reader.result); 
       $('#edfoto').hide(); 
       } else { 
        console.log("foto upload failed!"); 
       } 
      }); 

그것은 모든 검증을 통과 (파일 확장자/크기 검진) 아직 못해, 내가 볼 콘솔에서 포스트 base64로 데이터 , 빈 Reader.result [: 분노 :]!

Answer 1

독자의 onload 이벤트를 사용해야합니다. 결과가 즉시 채워지지 않습니다.

if (!Reader) Reader = new FileReader(); 

Reader.onload = function(e) { 
    console.log(e.result); 
    $.post("update.php", { foto: e.result }); 
    $('#errFoto').html(''); 
    $('#avt').attr('src', e.result); 
    $('#edfoto').hide();  
}; 
Reader.readAsDataURL($('#foto')[0].files[0]);