如何将文件中的图片转换为Base64字符串？

Question

我想 select 多张图片并将它们转换为 Base64 字符串。我将文件推送到一个数组中。我的需求是转换成Base64字符串后，想压入一个数组中。我无法将图像转换为 Base64 字符串。

$("input[name=property_images]").change(function() {
    var names = [];
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
    }
 console.log(names);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="file" name="property_images" multiple="multiple" />

Answer 1

这里我们有单张图片来转换base64字符串。

function readFile() {
  if (this.files) {
    for(i=0;i<this.files.length;i++)
      {
    var FR= new FileReader();
    FR.onload = function(e) {
      //document.getElementById("img").src       = e.target.result;
      //document.getElementById("b64").innerHTML = e.target.result;
      //$("#b64").append("<div></div>").html(e.target.result);
      $('<img src="'+e.target.result+'" />').appendTo('#show-image');
      $('<p>'+e.target.result+'</p>').appendTo('#text-image');
    };       
    FR.readAsDataURL( this.files[i] );
  }
    }
}

document.getElementById("inp").addEventListener("change", readFile, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" type='file' multiple>


<div id='show-image'></div>

<div id='text-image'></div>

Answer 2

更改函数以存储 base64 值

$(document).ready(function(){
    $("input[name=property_images]").change(function() {
      var imgBase64Arr = [];
      var files = this.files;
      for (var i = 0; i < files.length; i++) {
        (function(i){
          var FR = new FileReader();
          FR.onload = function(e) {
            imgBase64Arr.push( e.target.result );//adding base64 value to array

            if(i === files.length -1)//after all files are porcessed
              submitData(imgBase64Arr)
          };
          FR.readAsDataURL(files[i]);
        })(i);
      }

    });

   function submitData(imgBase64Arr){
     console.log(imgBase64Arr);
   }
});

如何将文件中的图片转换为Base64字符串？

How to convert an image into a Base64 string in a file?

javascript

jquery

base64