图像转换为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); }