Conversión de imagen a Base64

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

Me gustaría obtener la imagen en base64 una vez que el usuario eligió eso (antes de enviar el formulario)

Algo como :

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

Leí sobre File API y otras cosas, me gustaría una solución simple y entre navegadores (IE6 / IE7 excluido obviamente)

Cualquier ayuda agradecida gracias.

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: una imagen codificada en base64 (cadena) 4/3 del tamaño de los datos de la imagen original)}

Compruebe esta respuesta para cargar varias imágenes .

Soporte del navegador: http://caniuse.com/#search=file%20api
Más información aquí: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Exactamente lo que necesita :) Puede elegir la versión de devolución de llamada o la versión Promise. Tenga en cuenta que las promesas funcionarán en IE solo con Promise polyfill lib. Puede colocar este código una vez en una página, y esta función aparecerá en todos sus archivos.

El evento loadend se activa cuando el progreso se ha detenido en la carga de un recurso (por ejemplo, después de que se hayan enviado "error", "abortar" o "cargar")

Versión de devolución de llamada

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

Versión de promesa

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

Es útil trabajar con Objeto diferido en este caso y devolver la promesa:

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

Y la función anterior podría usarse de esta manera:

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

O en tu caso:

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