如何将readAsDataURL()的值赋给一个变量？

Question

好的，我看到很多关于使用readAsDataURL()的例子和问题，但似乎没有一个能解决我的问题。以下是我的代码：

$(document).ready(function(){
    var fileReader = new FileReader();
    $("form").submit(function(e){
        e.preventDefault();
        console.log(fileReader.readAsDataURL(document.getElementById("userfile").files[0]));
    });
});

我在控制台中得到的是undefined。我试图将base64编码的文件数据存储在一个变量中，以便我可以使用ajax上传它。有人能告诉我我做错了什么吗？

- Peeyush Kushwaha

Answer 1

大多数FileReader实例的方法都是异步报告结果的。

你必须绑定一个onload事件来捕获结果:

var fileReader = new FileReader();
fileReader.onload = function(event) {
    console.log(event.target.result);
};
fileReader.readAsDataURL(document.getElementById("userfile").files[0]);

- Rob W

---

@PRASANTH 不，参见https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility。如果您想在IE9-中使用此类API，请尝试使用polyfill，例如https://github.com/Jahdrien/FileReader。 - Rob W

好的，谢谢您的回复，如果有成果我会告诉您。 - PRASANTH