Chuyển đổi hình ảnh sang Base64

<input type="file" id="asd"/>

Tôi muốn lấy hình ảnh trong base64 khi người dùng đã chọn (trước khi gửi biểu mẫu)

Cái gì đó như :

$(input).on('change',function(){
  var data = $(this).val().base64file(); // it is not a plugin is just an example
  alert(data);
});

Tôi đã đọc về API tệp và các nội dung khác, tôi muốn có một giải pháp đơn giản và đa trình duyệt (rõ ràng là IE6 / IE7 bị loại trừ)

Bất kỳ sự giúp đỡ đánh giá cao cảm ơn.

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: Hình ảnh được mã hóa base64 (Chuỗi) 4/3 kích thước của dữ liệu hình ảnh gốc)}

Kiểm tra câu trả lời này để tải lên nhiều hình ảnh .

Hỗ trợ trình duyệt: http://caniuse.com/#search=file%20api
Thông tin thêm tại đây: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Chính xác những gì bạn cần :) Bạn có thể chọn phiên bản gọi lại hoặc phiên bản Promise. Lưu ý rằng Promise sẽ chỉ hoạt động trong IE với Promise polyfill lib. Bạn có thể đặt mã này một lần trên một trang và chức năng này sẽ xuất hiện trong tất cả các tệp của bạn.

Sự kiện loadend được kích hoạt khi tiến trình đã dừng khi tải tài nguyên (ví dụ: sau khi "lỗi", "hủy bỏ" hoặc "tải" đã được gửi đi)

Phiên bản gọi lại

        File.prototype.convertToBase64 = function(callback){
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    callback(e.target.result, e.target.error);
                };   
                reader.readAsDataURL(this);
        };

        $("#asd").on('change',function(){
          var selectedFile = this.files[0];
          selectedFile.convertToBase64(function(base64){
               alert(base64);
          }) 
        });

Phiên bản hứa hẹn

    File.prototype.convertToBase64 = function(){
         return new Promise(function(resolve, reject) {
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    resolve({
                      fileName: this.name,
                      result: e.target.result, 
                      error: e.target.error
                    });
                };   
                reader.readAsDataURL(this);
        }.bind(this)); 
    };

    FileList.prototype.convertAllToBase64 = function(regexp){
      // empty regexp if not set
      regexp = regexp || /.*/;
      //making array from FileList
      var filesArray = Array.prototype.slice.call(this);
      var base64PromisesArray = filesArray.
           filter(function(file){
             return (regexp).test(file.name)
           }).map(function(file){
             return file.convertToBase64();
           });
      return Promise.all(base64PromisesArray);
    };

    $("#asd").on('change',function(){
      //for one file
      var selectedFile = this.files[0];
      selectedFile.convertToBase64().
          then(function(obj){
            alert(obj.result);
          });
      });
      //for all files that have file extention png, jpeg, jpg, gif
      this.files.convertAllToBase64(/\.(png|jpeg|jpg|gif)$/i).then(function(objArray){
            objArray.forEach(function(obj, i){
                  console.log("result[" + obj.fileName + "][" + i + "] = " + obj.result);
            });
      });
    })

html

<input type="file" id="asd" multiple/>

<input type="file" onchange="getBaseUrl()">

function getBaseUrl ()  {
    var file = document.querySelector('input[type=file]')['files'][0];
    var reader = new FileReader();
    var baseString;
    reader.onloadend = function () {
        baseString = reader.result;
        console.log(baseString); 
    };
    reader.readAsDataURL(file);
}

Sẽ rất hữu ích khi làm việc với Đối tượng bị trì hoãn trong trường hợp này và trả về lời hứa:

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

Và hàm trên có thể được sử dụng theo cách này:

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

Hoặc trong trường hợp của bạn:

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});