Obraz przekonwertować Base64

Question

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

Chciałbym uzyskać obraz w base64 gdy użytkownik wybrał, że (przed złożeniem formularza)

coś takiego:

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

Czytałem o pliku API i inne rzeczy, chciałbym mieć proste rozwiązanie w różnych przeglądarkach (oczywiście IE6/IE7 wykluczone)

Każda pomoc doceniona dzięki.

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: Base64 zakodowany obraz (ciąg) 4/3 wielkości pierwotnych danych obrazu)}

Check this answer for multiple images upload.

Browser wsparcia: http://caniuse.com/#search=file%20api
Więcej informacji tutaj: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Answer 2

Dokładnie to, co trzeba :) Można wybrać wersję zwrotnej lub wersji obietnicy. Pamiętaj, że obietki będą działały 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.

Impreza loadend jest zwolniony, gdy postęp zatrzymał się na załadunku zasób (na przykład po „błąd”, „Anuluj” lub „obciążenia” zostały wysłane) 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/> 

Answer 3

Jest przydatny do pracy z Deferred Object w tym przypadku, i powrócić obietnica:

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 przede funkcji mogłyby zostać wykorzystane w ten sposób:

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

Lub Twój przypadek:

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