图像转换为Base64
<input type="file" id="asd"/> 一旦用户select了（在提交表单之前），我想要在base64中获取图像，
就像是 ：
$(input).on('change',function(){ var data = $(this).val().base64file(); // it is not a plugin is just an example alert(data); });
我读了关于File API和其他东西，我想简单和跨浏览器的解决scheme（显然排除IE6 / IE7）
任何帮助赞赏谢谢。
function readFile() { if (this.files && this.files[0]) { var FR= new FileReader(); FR.addEventListener("load", function(e) { document.getElementById("img").src = e.target.result; document.getElementById("b64").innerHTML = e.target.result; }); FR.readAsDataURL( this.files[0] ); } } document.getElementById("inp").addEventListener("change", readFile);
<input id="inp" type='file'> <p id="b64"></p> <img id="img" height="150">
正是你需要的:)你可以selectcallback版本或Promise版本。 请注意，promise只能在Promise的polyfill lib中使用。您可以将这段代码放在一个页面上，这个函数会出现在您的所有文件中。
当加载资源时停止进度（例如，在“错误”，“中止”或“加载”被调度之后），激活加载事件
callback版本
File.prototype.convertToBase64 = function(callback){ var reader = new FileReader(); reader.onloadend = function (e) { callback(e.target.result, e.target.error); }; reader.readAsDataURL(this); }; $("#asd").on('change',function(){ var selectedFile = this.files[0]; selectedFile.convertToBase64(function(base64){ alert(base64); }) });
诺言版本
File.prototype.convertToBase64 = function(){ return new Promise(function(resolve, reject) { var reader = new FileReader(); reader.onloadend = function (e) { resolve({ fileName: this.name, result: e.target.result, error: e.target.error }); }; reader.readAsDataURL(this); }.bind(this)); }; FileList.prototype.convertAllToBase64 = function(regexp){ // empty regexp if not set regexp = regexp || /.*/; //making array from FileList var filesArray = Array.prototype.slice.call(this); var base64PromisesArray = filesArray. filter(function(file){ return (regexp).test(file.name) }).map(function(file){ return file.convertToBase64(); }); return Promise.all(base64PromisesArray); }; $("#asd").on('change',function(){ //for one file var selectedFile = this.files[0]; selectedFile.convertToBase64(). then(function(obj){ alert(obj.result); }); }); //for all files that have file extention png, jpeg, jpg, gif this.files.convertAllToBase64(/\.(png|jpeg|jpg|gif)$/i).then(function(objArray){ objArray.forEach(function(obj, i){ console.log("result[" + obj.fileName + "][" + i + "] = " + obj.result); }); }); })
HTML
<input type="file" id="asd" multiple/>
在这种情况下使用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(); }
以上function可以这样使用：
var inputElement = $("input[name=file]"); readImage(inputElement).done(function(base64Data){ alert(base64Data); });
或者在你的情况下：
$(input).on('change',function(){ readImage($(this)).done(function(base64Data){ alert(base64Data); }); });
<input type="file" onchange="getBaseUrl()"> function getBaseUrl () { var file = document.querySelector('input[type=file]')['files'][0]; var reader = new FileReader(); var baseString; reader.onloadend = function () { baseString = reader.result; }; console.log(baseString); }
