@Torento20345

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

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

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

К примеру, после добавления, я их рендарю через FileReader()
И в html в src получаю src="data:image:/jpeg;base64,/......
Я могу использовать как-то этот src для получения доступа к файлу, чтобы после засунуть его в formData?
  • Вопрос задан
  • 105 просмотров
Решения вопроса 3
@zkrvndm
Софт для автоматизации
Можете. Используйте fetch, чтобы из base64 ссылки получить Blob для добавления в formData.

P. S. Но на самом деле было бы куда логичнее просто пушить (добавлять) подцепленные в поле файлы в отдельную переменную еще на этапе цепляния и уже оттуда их все брать, когда придёт время отправлять форму.
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
File унаследован от Blob, а значит с File можно делать все, что и с Blob, в том числе добавлять его в FormData через append или получать на него ссылку через URL.createObjectURL.
И да, FileReader на самом деле тоже работает с Blob.

Ну и ловите пример, близкий к Вашей задаче: https://developer.mozilla.org/en-US/docs/Web/API/F...
Ответ написан
Комментировать
cyber-jet
@cyber-jet
const files = document.getElementById('file-input').files;
for (var i = 0; i < files.length; i++) {
    console.log(files[i]);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы