Usando callbacks
Este enfoque es el clásico. Si quieres procesar todas las imágenes juntas en lugar de en forma independiente, puedes usar una función recursiva y agregar un callback para ejecutarlo en cuanto se termine de procesar todos los blobs. También puedes usar librerías utilitarias para esto como async.
$("#files").on("change", function() {
parseImages(Array.from(this.files), function(images) {
console.log(images);
});
});
function parseImages(files, cb, store = [], i = 0) {
if (files.length === i) return cb(store);
const _store = store.slice(0);
getBase64(files[i], {
onload(img) {
_store.push(img);
return parseImages(files, cb, _store, i + 1);
},
onerror: onBase64fail,
});
}
function onBase64fail(err) {
console.log(err);
}
function getBase64(file, { onload, onerror }) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => onload(reader.result);
reader.onerror = () => onerror(reader.error);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="files" type="file" multiple />
Usando promesas
Usando promesas es muy similar a usar callbacks, la diferencia radica en que esperas a que se resuelvan las promesas (conversiones) antes de proceder a devolverlas todas. Usando este estilo hace ver el código de forma síncrona.
$("#files").on("change", async function() {
console.log(await parseImages(Array.from(this.files)));
});
async function parseImages(files, store = [], i = 0) {
if (files.length === i) { return store; }
const img = await getBase64(files[i]);
const _store = store.slice(0);
_store.push(img);
return parseImages(files, _store, i + 1);
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="files" type="file" multiple />
También puedes usar Generadores para este propósito.