Как в input сделать отмену сброса файлов при добавлении нового?

Question

[blackbb]

Здравствуйте. Не знаю как правильно этот вопрос задать, но суть вот в чем.

<form action="" method="post" enctype="multipart/form-data">
     <input id="id_files" multiple="multiple" name="files" type="file">
     <button class="btn btn-primary" type="submit" name="submit">Добавить</button>
</form>

Как сделать, чтобы при добавлении новых файлов или файла в input не сбрасывались предыдущие.

Comments

[OVK2015]

Создаете массив imagesList и в него тихо собираете .files по мере выбора.
Переда отправкой выполняете след код:
var userData = new FormData();
imagesList.forEach(function(item, index){userData.append('imgItem' + index, item);});
Вроде все

[blackbb]

Спасибо, попробую.

Answer 1

[Денис Букреев]

Добавлять новый инпут после загрузки и переключать фокус кнопочки на новый инпут.

Comments

[blackbb]

Ужас какой. Это не решение проблемы. Нужен именно этот input.

[riot26]

blackbb: нельзя. Можно прятать старые инпуты, можно превентивно грузить на сервер.

[blackbb]

riot26: т.е. вы хотите сказать javascript не дает такой возможности?

[Денис Букреев]

blackbb: не понял, в чем ужас?
Файл - входящие данные. Под любые входящие данные нужен отдельный инпут (это как конверт от письма).
Никто же не использует один и тот же инпут для имени, фамилии, телефона, e-mail и тд - потому что это невозможно.

Называть это ужасом и не решением проблемы - неграмотность в области HTML и взаимодействия с сервером

[Денис Букреев]

blackbb: еще может быть выходом сразу отправлять на сервер после загрузки и очищать инпут, но тогда новый файл не добавить, пока загружается первый (если только опять же не добавлять инпуты)

[Денис Букреев]

blackbb: и что, добавить элемент в документ - это ужас? серьезно? одна строка кода всего

[blackbb]

Денис Букреев: может напишите пример этой одной строки кода.

[riot26]

Денис Букреев: для мультивыбора пикч с удалением и превьюшкой без загрузки на сервер писал такой костыль: https://jsfiddle.net/riot26/pc1a616n/
Но тогда на сервере получаем не файл, а base64.

[Денис Букреев]

blackbb: $('<input/>').appendTo('body');
Ясен-красен, что на нативном JS займет пару строк.

[Денис Букреев]

riot26: сложьна

[riot26]

Денис Букреев: согласен, но там ещё есть возможность помечать удалёнными уже загруженные картинки. И быдлокод, да.

[blackbb]

riot26: как раз мне такое и нужно. Я хотел взять этот пример codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhy..., но проблема в том, что мне нужно не только изображения, а файлы. Так как я в javascript не бум-бум оставил эту идею и кое-как написал свой код с выводом превью, но вот хотелось бы конечно убрать сброс файлов и добавить удаление их.

[riot26]

blackbb: у меня инпуты не плодятся, но сервер получает данные не в лучшем виде. Всё же лучше делать старый инпут скрытым и на его место подсовывать новый.