<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.
base64file()
- czy to wtyczka?Odpowiedzi:
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
źródło
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.
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/>
źródło
<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); }
źródło
file
jest używane w ostatniej liniireader.readAsDataURL(file);
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); }); });
źródło