BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 画像をBase64に変換する

2023-01-16 09:07:23

質問 

<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は当然除きます）。

どんな助けでも感謝します。

どのように解決するのですか？ 

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">

( P.S: base64でエンコードされた画像(文字列) 元画像データの4/3の大きさ)

この答えを確認するには 複数画像のアップロード .

ブラウザ対応。 http://caniuse.com/#search=file%20api

詳しくはこちら https://developer.mozilla.org/en-US/docs/Web/API/FileReader

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します