Conversion d'Image en Base64

Question

Conversion d'Image en Base64

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

je voudrais obtenir l'image dans base64 une fois que l'Utilisateur a choisi que (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 à propos de L'API de fichier et d'autres choses, je voudrais une solution simple et cross-browsers (IE6/IE7 exclu évidemment)

Toute aide appréciée merci.

57

base64 file input javascript jquery

demandé sur dark_ruby 2013-07-18 01:02:02

4 réponses

score 155 · 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: Une image encodée en base64 (String) 4/3 de la taille de l'image d'origine des données)}

Cochez cette réponse pour plusieurs images télécharger .

support du navigateur: http://caniuse.com/#search=file%20api

Plus d'info ici: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

score 30 · 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 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 le progrès s'est arrêté sur le chargement de une ressource (par exemple, après "erreur", "abandon", ou "charge" ont été expédié)

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

Promesse version

    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/>

score 5 · Answer 3

il est utile de travailler avec objet différé dans ce cas, et retour 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 supérieure peuvent être utilisées de cette manière:

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

score 1 · 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); 
}

Las etiquetas más populares

Conversion d'Image en Base64

4 réponses