immagine convertire in Base64

Question

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

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

Qualcosa di simile:

$(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.

Answer 1

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: Un'immagine codificata base64 (stringa) 4/3 la dimensione dei dati dell'immagine originale)}

Check this answer for multiple images upload.

Supporto browser: http://caniuse.com/#search=file%20api
Maggiori informazioni qui: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

Esattamente quello che ti serve :) È possibile scegliere la versione di richiamata o versione Promessa. 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 attivato quando il progresso si è fermato sul caricamento di una risorsa (ad esempio dopo "errore", "abortire", o "carico" sono stati spedito) 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 Promessa

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

.210

html

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

Answer 3

E 'utile per lavorare con Deferred Object in questo caso, e tornare promessa:

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 soprattutto la funzione potrebbe essere utilizzato in questo modo:

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

O in il tuo caso:

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

Answer 4

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