Как после загрузки файлов в инпут files получить доступ к каждому отдельно?

Question

[Torento20345]

Есть блок в который загружаются картинки и в files они передаются в порядке их загрузки.
Но хочется после загрузки их в files, иметь возможность как-то их получить.

Я могу как-то из files добавить их в другой объект или массив и уже его добавляя в formData.append()
Отправлять на сервер файлы в нужном мне порядке?

К примеру, после добавления, я их рендарю через FileReader()
И в html в src получаю src="data:image:/jpeg;base64,/......
Я могу использовать как-то этот src для получения доступа к файлу, чтобы после засунуть его в formData?

Answer 1

[Надим]

Можете. Используйте fetch, чтобы из base64 ссылки получить Blob для добавления в formData.

P. S. Но на самом деле было бы куда логичнее просто пушить (добавлять) подцепленные в поле файлы в отдельную переменную еще на этапе цепляния и уже оттуда их все брать, когда придёт время отправлять форму.

Comments

[Torento20345]

А что за fetch?
Я его видел только в отправлении форм, но не в загрузке картинок на клиенте.
И получается у меня будут в src вместо мутной ссылки - Blob, который я просто смогу засовывать в formData?

[Надим]

Torento20345, да. Пример:

base64 = document.querySelector('img').src;
blob = await (await fetch(base64)).blob();

Функция внутри которой вы используйте await обязательно должна иметь приставку async, иначе получите ошибку.

Answer 2

[Дмитрий Беляев]

File унаследован от Blob, а значит с File можно делать все, что и с Blob, в том числе добавлять его в FormData через append или получать на него ссылку через URL.createObjectURL.
И да, FileReader на самом деле тоже работает с Blob.

Ну и ловите пример, близкий к Вашей задаче: https://developer.mozilla.org/en-US/docs/Web/API/F...

Answer 3

[Евгений]

const files = document.getElementById('file-input').files;
for (var i = 0; i < files.length; i++) {
    console.log(files[i]);
}

Comments

[Torento20345]

Если я отрендерил их в блоке и в src есть "data:image:/jpeg;base64,/......"
Я могу таким способом пройтись циклом по блоку и получить из него files, а не из input?