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

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

По ходу написания проекта наткнулся на проблему, долго откладывал решение вопроса, но мелкие набеги на проблему не помогли, а на масштабные исследования времени нет, тапками не кидайте если что очевидное пропустил, лучше носом ткните. К проблеме: Есть инпут типа файл мультипле, к нему прикручено превью, которое использует FileReader()->readAsDataURL();.
Собственно, есть задача - при загрузке с компа у нас в превью появляется картинка, все ок. Еще раз загружаем с компа картинку - рисуем превью, и тут у меня затык: как засунуть ее в массив отправляемый при субмите на сервер??? Вроде список содержится в fileList, но это вроде только те файлы что пришли с последним запросом с компа? Буду рад любой помощи, если есть наводящие вопросы - задавайте.
UPD: Подойдет обоснованное "НИКАК", если нет возможности то и хрен с ним, буду грохать превьюхи или заморачиваться с аяксовой загрузкой и удалением лишних при необходимости, но это крайний вариант ((.
  • Вопрос задан
  • 849 просмотров
Решения вопроса 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 Автор вопроса
{PHP, MySql, HTML, JS, CSS} developer
Итак, вариант решения который в итоге подошел по таким параметрам:
1) Файлы можно загружать в несколько этапов, то есть добавил, удалил, еще добавил и тд.
2) Превью файлов хранится в браузере, никакой загрузки до субмита основной формы на сервер не происходит, дабы предотвратить мертвые загрузки - когда люди закрывают форму недозаполнив, но подгрузив файлы.
3) Файлы грузятся на сервер по субмиту формы с кучей полей и линкуются с объектом.

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

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

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

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

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