97 
<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 は明らかに除外されています)。

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

4

7 に答える 7

227 

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

( PS: base64 でエンコードされた画像 (文字列) は元の画像データの 4/3 のサイズ)

複数の画像のアップロードについては、この回答を確認してください。

ブラウザのサポート: http://caniuse.com/#search=file%20api
詳細はこちら: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

于 2013-07-17T22:12:58.637 に答える
7

この場合、 Deferred Objectを操作して promise を返すと便利です。

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;
    if (files && files[0]) {
        var fr= new FileReader();
        fr.onload = function(e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL( files[0] );
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

上記の関数は次のように使用できます。

var inputElement = $("input[name=file]");
readImage(inputElement).done(function(base64Data){
    alert(base64Data);
});

またはあなたの場合：

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});
于 2016-03-21T15:10:34.800 に答える