web-dev-qa-db-fra.com

Image convertie en Base64

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

Je voudrais obtenir l'image dans base64 une fois que l'utilisateur a choisi cela (avant de soumettre le formulaire)

Quelque chose comme :

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

J'ai lu des informations sur les API de fichiers et autres, je voudrais une solution simple et multi-navigateurs (IE6/IE7 évidemment exclu)

Toute aide appréciée merci.

javascriptjqueryfileinputbase64
69
bombastic
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: Une image codée en base64 (String) 4/3 la taille des données de l'image d'origine)

Cochez cette réponse pour plusieurs images téléchargées .

Prise en charge du navigateur: http://caniuse.com/#search=file%20api
Plus d'infos ici: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

180
Roko C. Buljan

Exactement ce dont vous avez besoin :) Vous pouvez choisir la version de rappel ou la version de Promise. Notez que les promesses ne fonctionneront dans IE qu'avec Promise polyfill lib.Vous pouvez mettre ce code une fois sur une page et cette fonction apparaîtra dans tous vos fichiers.

L'événement loadend est déclenché lorsque la progression du chargement d'une ressource est arrêtée (par exemple, après que "erreur", "abandon" ou "chargement" ait été envoyé)

Version de rappel

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

Version de promesse

    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/>
34
Alex Nikulin

Il est utile de travailler avec objet différé dans ce cas, et de retourner la promesse suivante:

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

Et la fonction ci-dessus pourrait être utilisée de cette façon:

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

Ou dans votre cas:

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});
5
Vasyl Senko
<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);
}
1
Василь Петров