Immagine convertita in Base64

 

Vorrei ottenere l’immagine in base64 una volta che l’utente l’ha scelto (prima di inviare il modulo)

Qualcosa di simile a :

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

Ho letto su File API e altre cose, vorrei una soluzione semplice e cross-browser (IE6 / IE7 escluso ovviamente)

Qualsiasi aiuto apprezzato grazie.

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

Esattamente ciò che ti serve 🙂 Puoi scegliere la versione di callback o la versione Promise. Nota che le promesse funzioneranno solo in IE con Promise polyfill lib.Potrai inserire questo codice una volta su una pagina e questa funzione apparirà in tutti i tuoi file.

L’evento loadend viene generato quando il progresso si è fermato sul caricamento di una risorsa (ad esempio dopo che sono stati inviati “errore”, “interruzione” o “caricamento”)

Versione callback

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

Versione promise

  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

  

È utile lavorare con Deferred Object in questo caso e restituire la 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 la funzione sopra potrebbe essere utilizzata in questo modo:

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

O nel tuo 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); }