javascript - 图片转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);
});

我阅读了 File API 和其他东西，我想要一个简单的跨浏览器解决方案(显然不包括 IE6/IE7)

感谢任何帮助。

Answer 1

function readFile() {
  
  if (!this.files || !this.files[0]) return;
    
  const FR = new FileReader();
    
  FR.addEventListener("load", function(evt) {
    document.querySelector("#img").src         = evt.target.result;
    document.querySelector("#b64").textContent = evt.target.result;
  }); 
    
  FR.readAsDataURL(this.files[0]);
  
}

document.querySelector("#inp").addEventListener("change", readFile);

<input id="inp" type="file">
<p id="b64"></p>
<img id="img" height="150">

_{(P.S:一个base64编码的图像(字符串)是原始图像数据大小的4/3)}

Check this answer for multiple images upload .

浏览器支持:http://caniuse.com/#search=file%20api
更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/API/FileReader