jquery - ajax 文件发布：无法通过 FileReader 自动发送 base64 数据

Question

如果我手动执行此操作，我会更新图片

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 [:rage:]！

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]);