Obraz przekonwertowany do Base64

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

Chciałbym uzyskać obraz w base64 po wybraniu tego przez użytkownika (przed wysłaniem formularza)

Coś jak :

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

Czytałem o File API i innych rzeczach, chciałbym prostego rozwiązania dla różnych przeglądarek (oczywiście z wyłączeniem IE6 / IE7)

Każda pomoc doceniona dzięki.

pompatyczny
źródło
1
A czego nie rozumiesz o interfejsie API pliku HTML5? Czego próbowałeś? Co nie działa?
epascarello
@epascarello nie są w pełni obsługiwane, faktycznie caniuse.com/#feat=fileapi Potrzebuję obejścia, zwłaszcza, że ​​nadal używane są wersje Androida (stare wersje), a także stare wersje iOS, a także chciałbym zaangażować IE9, który jest nadal często używany: P
bombastic
obejście czego? Co próbujesz zrobić z plikiem? base64file()- czy to wtyczka?
David Hellsing,
@David Po prostu chciałbym uzyskać plik base64, gdy użytkownik wybierze plik ze swojego komputera, base64file () to tylko przykład
bombastic
1
@epascarello yeah i to było dokładnie moje pytanie, jak obsługiwać wszystkie przeglądarki: D
bombastic

Odpowiedzi:

210

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

( PS: obraz zakodowany w standardzie base64 (ciąg) 4/3 rozmiaru oryginalnych danych obrazu)

Sprawdź tę odpowiedź w przypadku przesyłania wielu obrazów .

Obsługa przeglądarek: http://caniuse.com/#search=file%20api
Więcej informacji tutaj: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Roko C. Buljan
źródło
2
tak, dziękuję, więc faktycznie widzę, że czytnik plików nie jest w pełni obsługiwany, jak mogę sprawić, by to samo obsługiwało również stare urządzenia z Androidem / iOS?
bombastic
1
czy są jakieś inne przeglądarki? xD
RicardoE
To był naprawdę fajny kod do konwersji obrazu na base64 .. Czy mogę przekonwertować to z powrotem na obraz w javascript? Wcześniej korzystałem z dekodowania kodowania base64, ale nie mam pojęcia o konwersjach obrazu ...
The Coder,
@TheCoder Możesz umieścić go bezpośrednio w img src jako ciąg base64, aby uzyskać z niego dane obrazu, użyj kontekstu kanwy.
Qwerty
1
@bombastic Użyłem JS do zbudowania aplikacji na iOS i Androida na obu platformach, które działały dobrze. IOS jest normalny, a na Androidzie potrzebowałem natywnego kodu, aby uzyskać pozwolenie na galerię ...
Osman Gani Khan Masum
36

Dokładnie to, czego potrzebujesz :) Możesz wybrać wersję callback lub wersję Promise. Zauważ, że obietnice będą działać w IE tylko z Promise polyfill lib. Możesz umieścić ten kod raz na stronie, a ta funkcja pojawi się we wszystkich twoich plikach.

Zdarzenie loadend jest wywoływane, gdy postęp został zatrzymany podczas ładowania zasobu (np. Po wysłaniu „błędu”, „przerwania” lub „załadowania”)

Wersja oddzwaniania

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

Wersja obietnica

    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/>
Alex Nikulin
źródło
8
<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);
}
Wasyl Pietrow
źródło
1
„plik” jest zadeklarowany, ale jego wartość nigdy nie jest odczytywana wewnątrz funkcji getBaseUrl ().
Biranchi
@Biranchi filejest używane w ostatniej liniireader.readAsDataURL(file);
Achim
7

W takim przypadku warto pracować z odroczonym obiektem i zwrócić obietnicę:

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

A powyższą funkcję można wykorzystać w ten sposób:

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

Lub w twoim przypadku:

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});
Wasyl Senko
źródło
Naprawdę potrzebowałem tego, mam na myśli odroczony, ponieważ zwracam base64 do metody wywołującej. Chcę wiedzieć, czy Twoje rozwiązanie będzie działać we wszystkich przeglądarkach?
Thameem