ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer

Как используя js/jq загрузить в input file файлы не за 1 раз, а за несколько?

По ходу написания проекта наткнулся на проблему, долго откладывал решение вопроса, но мелкие набеги на проблему не помогли, а на масштабные исследования времени нет, тапками не кидайте если что очевидное пропустил, лучше носом ткните. К проблеме: Есть инпут типа файл мультипле, к нему прикручено превью, которое использует FileReader()->readAsDataURL();.
Собственно, есть задача - при загрузке с компа у нас в превью появляется картинка, все ок. Еще раз загружаем с компа картинку - рисуем превью, и тут у меня затык: как засунуть ее в массив отправляемый при субмите на сервер??? Вроде список содержится в fileList, но это вроде только те файлы что пришли с последним запросом с компа? Буду рад любой помощи, если есть наводящие вопросы - задавайте.
UPD: Подойдет обоснованное "НИКАК", если нет возможности то и хрен с ним, буду грохать превьюхи или заморачиваться с аяксовой загрузкой и удалением лишних при необходимости, но это крайний вариант ((.
  • Вопрос задан
  • 2233 просмотра
Решения вопроса 2
Stalker_RED
@Stalker_RED
JS не может изменять <input type="file">, это ограничение безопасности. Единственный нормальный вариант отправить частично - прочитать файлы из FileList и отправлять AJAX-ом.

Непонятно зачем вообще гонять превьюшки туда-сюда, их же можно по месту генерировать.
https://jsfiddle.net/kj67cmuw/2/

Подборка типичных случаев работы с <input type="file">
https://developer.mozilla.org/en-US/docs/Using_fil...
Ответ написан
ThunderCat
@ThunderCat Автор вопроса, куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Итак, вариант решения который в итоге подошел по таким параметрам:
1) Файлы можно загружать в несколько этапов, то есть добавил, удалил, еще добавил и тд.
2) Превью файлов хранится в браузере, никакой загрузки до субмита основной формы на сервер не происходит, дабы предотвратить мертвые загрузки - когда люди закрывают форму недозаполнив, но подгрузив файлы.
3) Файлы грузятся на сервер по субмиту формы с кучей полей и линкуются с объектом.

Реализация:
1) так как все писать руками было лень было дернуто с гитхаба половинчатое решение, и "после сборки обработано напильником" (кому интересно - пишите - положу куда-то или форкну ветку). Что умеет сие творение "из коробки": подгружать файлики картинок и делать превью с кнопкой удаления. Все файлы пишутся в отдельный массив, который в конце по нажатию кнопки(опционально сразу при подгрузке с винта) аяксом отправляет на сервер файлы, генерировать кастомный евент по завершении загрузки. Что-то еще, но прочие фишки не понадобились.
2) В результате обточки было добавлено несколько свойств - максимальное количество файлов, максимальный размер файла, максимальный размер всего набора и токен. Теперь оно умеет ругаться на превышения лимитов и отправлять не только файлы, добавленные в массив, но и ключ-токен.
3) На основную форму был повешен листенер онсубмит, который проверял переменную filesSended, по умолчанию установленную в false, и при фалс делал превентдефаулт форме, аяксом слал файлы и токен на серв, по завершении загрузки срабатывал листенер на евент загрузки, который выставлял filesSended в тру, и снова субмитил основную форму, уже без превентдефаулт. Все выглядит как простая отправка формы с перезагрузкой.
4) На сервере файлы принимаются, в базу пишем пути и токен, после чего срабатывает обработчик формы и на сервер приходят остальные данные и дубль токена из хидден инпута. Из них строится объект, айдишник и токен передается в объект картинки, методу ->relinkImages($id,$token); Метод тащит все картинки с заданным токеном, меняет поле связи на нужный айди, обнуляет токен и сохраняет запись. Все!
5) В качестве паранойи в сессию пишутся все токены выданные пользователю и при загрузке картинок и данных наличие пришедшего постом токена проверяется в сессии.

Отдельное спасибо Stalker_RED и Сергей delphinpro за умные мысли, советы и отличное знание темы, сам в жс "плаваю".

сори что поздно, форк аплоадера, если кому надо, пилить придется под себя.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
20 апр. 2024, в 09:15
8000 руб./за проект
20 апр. 2024, в 08:39
100000 руб./за проект
20 апр. 2024, в 08:24
1500 руб./за проект