Convertir imagen a Base64

Question

Convertir imagen a Base64

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

Me gustaría obtener la imagen en base64 una vez que el usuario lo haya elegido (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);
});

He leído acerca de API de archivos y otras materias, me gustaría una solución simple y entre navegadores (IE6 / IE7 excluidos obviamente)

Cualquier ayuda apreciada gracias.

57

javascript jquery file base64 input

Author: dark_ruby, 2013-07-18

Source

4 answers

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

El evento loadend se dispara cuando el progreso se ha detenido en la carga de un recurso (por ejemplo, después de" error"," abortar", o" cargar " han sido expedidos)

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

Promesa versió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/>

30

Author: Alex Nikulin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-05 05:55:05

Es útil trabajar con Objeto Diferido en este caso, y devolver 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 por encima de la función podría ser utilizado de esta manera:

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

O, en su caso:

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

5

Author: Vasyl Senko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-21 15:10:34

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

1

Author: Василь Петров,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-04 15:37:08

score 155 · Accepted Answer

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

Compruebe esta respuesta para carga de múltiples 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