使用HTML5 FileReader读取本地图像文件到img

Question

我试图将本地图像文件读取到img元素中。 但是，readAsDataURL()似乎返回“undefined”。 我做错了什么？

var input = $('.mapimage_input').get(0);
console.log(input); // <input type="file" class="mapimage_input" accept="image/jpeg">
var file = input.files[0];
console.log(file); // File {webkitRelativePath: "", lastModifiedDate: Fri Mar 30 2012 12:32:03 GMT+0200, name: "avatar.jpg", type: "image/jpeg", size: 8724…}
var fr = new FileReader();
var img = fr.readAsDataURL(file);
console.log(img); // undefined
$('.mapimage_layer').attr('src',img);

- Flash Thunder

Answer 1

FileReader.readAsDataURL是异步的。

开始读取指定的Blob或File的内容。当读取操作完成时，readyState将变为DONE，并且如果有的话，将调用onloadend回调函数。此时，result属性包含表示文件数据的data: URL。

将onloadend回调附加到阅读器。

fr.onloadend = function() {
    var img = fr.result;                
    console.log(img);
    $('.mapimage_layer').attr('src',img);
}

- Matt Ball

---

好的，那么我怎么为此创建一个回调呢？ - Flash Thunder

以上代码中有一些错误，但是我理解了。我会尽快作答。 - Flash Thunder

修复了一个问题 - 我有没有漏掉其他的？ - Matt Ball

我认为现在一切都没问题了，看到有些人使用的是oneload而不是onloadend，可能他们是错误的。 - Flash Thunder

Answer 2

这对我来说很好用！！

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            jQuery('#target').attr('src', e.target.result);

        }

        reader.readAsDataURL(input.files[0]);
    }
}

jQuery("#inputTypeFile").change(function(){
    readURL(this);
});

- Mariano E. Ferro

---

您好，欢迎来到StackOverflow。请尽量为答案添加一些解释。 - Chait