イメージをファイルのBase64文字列に変換するにはどうすればよいですか？

Question

複数の画像を選択してBase64文字列に変換したいと考えています。私は1つの配列にファイルをプッシュしました。私の要件は、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); 
 
    } 
 
\t 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値

$(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); 
    } 
}); 

Answer 2

我々は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>