图像转换为Base64

Question

<input type="file" id="asd"/>用户选择后，我想在base64中获取图像（提交表单之前）就像是 ：$(input).on('change',function(){  var data = $(this).val().base64file(); // it is not a plugin is just an example  alert(data);});我了解了文件API和其他内容，我想要一个简单的跨浏览器解决方案（显然不包括IE6 / IE7）任何帮助表示感谢。

Answer 1

在这种情况下，使用Deferred Object并返回promise 是很有用的：

function readImage(inputElement) {

    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {

        var fr= new FileReader();

        fr.onload = function(e) {

            deferred.resolve(e.target.result);

        };

        fr.readAsDataURL( files[0] );

    } else {

        deferred.resolve(undefined);

    }

    return deferred.promise();

}

以上功能可以通过这种方式使用：

var inputElement = $("input[name=file]");

readImage(inputElement).done(function(base64Data){

    alert(base64Data);

});

或您的情况：

$(input).on('change',function(){

  readImage($(this)).done(function(base64Data){ alert(base64Data); });

});