Стилизация формы загрузки файлов?

Question

[fansnooker]

Подскажите, как сверстать такую форму.
Если с кнопкой я ещё разобрался, её можно стилизовать и повесить onclick по скрытому input[type=file],
то как сделать возможность добавлять файлы по одному и кнопки удаления у каждого файла.

Comments

[kshkld7ck]

Ни к чему вешать onclick, сделайте <label for="fileinputid">+ Добавить файлы</label> и его стилизуйте

Answer 1

[Александр]

при загрузке фалов читать их через FileReader
получить название файла и создать дом объекты, один скрытый интпут, туда записать имя файла и содержимое файла, второй элемент это уже дивник как на картинке с именем файла и крестиком.
По крестику удалять дивник, и созданный инпут.
При отправки формы на сервер файлы придут из инпутов, собрать и записать их на сервере с помощью пыхи.

Answer 2

[Destell]

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