Javascript 从html文件上载元素获取base64字符串_Javascript_Html_File Upload

Javascript 从html文件上载元素获取base64字符串

javascript html file-upload

Javascript 从html文件上载元素获取base64字符串,javascript,html,file-upload,Javascript,Html,File Upload,我想将图像从文件上载元素转换为base64字符串我在这里找到了解决办法 @SunnyMilenov回答，但我不确定传递给函数的是什么 encode : function (input) {...} 针对HTML5和不含HTML5的IE的更新答案您需要使用FileReader.readAsDataURL（）来代替，请参见示例函数getImage（）{ var reader=new FileReader（）； var f=document.getElementById（“文件选择”）.

我想将图像从文件上载元素转换为base64字符串

我在这里找到了解决办法

@SunnyMilenov回答，但我不确定传递给函数的是什么

 encode : function (input) {...}

针对HTML5和不含HTML5的IE的更新答案

您需要使用FileReader.readAsDataURL（）来代替，请参见示例

函数getImage（）{ var reader=new FileReader（）； var f=document.getElementById（“文件选择”）.files； reader.onloadend=函数（）{ console.log（reader.result）； } reader.readAsDataURL（f[0]）； }


转换


$（文档）.ready（函数（）{
函数convertImgToBase64（url、回调、outputFormat）{
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像；
img.crossOrigin='匿名'；
img.onload=函数（）{
canvas.height=img.height；
canvas.width=img.width；
ctx.drawImage（img，0,0）；
var dataURL=canvas.toDataURL（outputFormat | | |'image/png'）；
callback.call（this，dataURL）；
//清理
canvas=null；
};
img.src=url；
}
$（'img2b64'）。提交（函数（事件）{
var imageUrl=$（this.find（'input[name=url]'））.val（）；
log（'imageUrl'，imageUrl）；
convertImgToBase64（图像URL，函数（base64Img）{
$（“.output”）
.find（'textarea'）
.val（base64Img）
(完)
.find（'a'））
.attr（'href'，base64Img）
.文本（base64Img）
(完)
.find（'img'））
.attr（'src'，base64Img）；
});
event.preventDefault（）；
});
});
输入

输出

我想在IE 9或更早的时候使用它查看我对使用html5和不使用html5的IE解决方案的更新响应我不需要它

<!DOCTYPE html>
<html>
<style type="text/css">

</style>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
      canvas.height = img.height;
      canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
          // Clean up
        canvas = null; 
    };
    img.src = url;
  }


  $('#img2b64').submit(function(event){
      var imageUrl = $(this).find('input[name=url]').val();
      console.log('imageUrl', imageUrl);
      convertImgToBase64(imageUrl, function(base64Img){
          $('.output')
              .find('textarea')
                  .val(base64Img)
                  .end()
              .find('a')
                  .attr('href', base64Img)
                  .text(base64Img)
                  .end()
              .find('img')
                  .attr('src', base64Img);
      });

      event.preventDefault();
  });
});
</script>
</head>
<body>
<h2>Input</h2>  
<form class="input-group" id="img2b64">
    <input 
        type="url" 
        name="url" 
        class="form-control"
        placeholder="Insert an IMAGE-URL" 
        value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"  
        required>
    <span class="input-group-btn">
        <input 
            type="submit" 
            class="btn btn-default">
    </span>
</form>

<hr>

<h2>Output</h2>        
<div class="output">
    <textarea class="form-control"></textarea><br>
    <a></a><br><br>
    <img><br>
</div>
</body>

</body>
</html>