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

ajax文件帖子：无法自动通过FileReader发送base64数据

1 个答案: