Image converter para Base64

 

Eu gostaria de obter a imagem em base64 uma vez que o usuário escolheu isso (antes de enviar o formulário)

Algo como :

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

Eu li sobre o File API e outras coisas, eu gostaria de uma solução simples e cross-navegadores (IE6 / IE7 excluídos, obviamente)

Qualquer ajuda agradeceu obrigado.

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

Exatamente o que você precisa 🙂 Você pode escolher a versão de retorno ou a versão Promessa. Observe que as promises funcionarão no IE apenas com Promise polyfill lib.Você pode colocar esse código uma vez em uma página e essa function aparecerá em todos os seus arquivos.

O evento loadend é acionado quando o progresso é interrompido no carregamento de um recurso (por exemplo, após “error”, “abort” ou “load” ter sido despachado)

Versão de retorno

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

Versão promissora

  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

  

É útil trabalhar com o Objeto Deferido neste caso e retornar a 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(); } 

E acima da function poderia ser usada desta maneira:

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

Ou no seu caso:

 $(input).on('change',function(){ readImage($(this)).done(function(base64Data){ alert(base64Data); }); }); 
  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); }