Conversion d'une image en base64

Question

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

Je voudrais obtenir l'image dans base64 une fois que l'utilisateur l'a choisi (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 articles sur l'API de fichier et d'autres choses, mais je voudrais une solution simple et multi-navigateurs (sauf IE6/IE7 évidemment).

Toute aide est appréciée, merci.

Answer 1

function readFile() {

  if (!this.files || !this.files[0]) return;

  const FR = new FileReader();

  FR.addEventListener("load", function(evt) {
    document.querySelector("#img").src         = evt.target.result;
    document.querySelector("#b64").textContent = evt.target.result;
  }); 

  FR.readAsDataURL(this.files[0]);

}

document.querySelector("#inp").addEventListener("change", readFile);

<input id="inp" type="file">
<p id="b64"></p>
<img id="img" height="150">

_{( <strong>P.S : </strong>Une image codée en base64 (String) 4/3 de la taille des données de l'image originale)}

Vérifiez cette réponse pour téléchargement de plusieurs images .

Support des navigateurs : http://caniuse.com/#search=file%20api
Plus d'informations ici : https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

Exactement ce dont vous avez besoin :) Vous pouvez choisir la version callback ou la version Promise. Notez que les promesses ne fonctionneront dans IE qu'avec la librairie Promise polyfill. 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 s'arrête ressource (par exemple, après que les messages "error", "abort" ou "load" aient été envoyés). envoyés)

Version du 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 la 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/>

Answer 3

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

Answer 4

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

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

Answer 5

Fonction de conversion d'image en base64 en utilisant jquery (vous pouvez convertir en vanila js). J'espère que cela vous aidera !

Utilisation : input est votre nomId input a le fichier image

<input type="file" id="asd"/>
<button onclick="proccessData()">Submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

async function converImageToBase64(inputId) {
  let image = $('#'+inputId)[0]['files']

  if (image && image[0]) {
    const reader = new FileReader();

    return new Promise(resolve => {
      reader.onload = ev => {
        resolve(ev.target.result)
      }
      reader.readAsDataURL(image[0])
    })
  }
}

async function proccessData() {
  const image = await converImageToBase64('asd')
  console.log(image)
}

</script>

Exemple : converImageToBase64('yourFileInputId')

https://codepen.io/mariohandsome/pen/yLadmVb