javascript jquery Загрузка файлов в скрытое поле на форме и вывод списка прикреплённых файлов -- "Стилизация поля загрузки"
Primary tabs
Предположим, то вы хотите использовать свою кнопку (или любой другой элемент) для добавления файлов на форму. Делаем так:
- Скрываем input file в который фактически будут загружаться файлы:
<input type="file" name="Comment[files][]" id="comment-files" multiple style="display:none;">
- Далее на том элементе, при клике на который должно показывать окно выбора файлов, повесим событие:
$('a#add-comment-files').on('click', function() { $('input#comment-files').trigger('click'); return false; });
-- оно вызовет клик на скрытом элементе -- как бы переадресуя наш клик.
- Если вы хотите выводить имена прикреплённых файлов, то в случае если значение скрытого инпута изменится (пользователь выбрал что-то новое) можно повесить такой обработчик:
$('input#comment-files').on('change', function() { showFileNames(); return false; });
- И реализовать функцию вывода списка названий прикреплённых файлов:
function showFileNames() { var files = $("input:file[name='Comment\[files\]\[\]']").prop("files"); console.log('Имена файлов:', files); var $attachedFilesList = $('ul#attached-fiels-list'); $attachedFilesList.html(''); if (files.length > 0 ) { for (var i = 0; i < files.length; i++) { //console.log(files[i].name); $attachedFilesList.append('<li><a href="#">' + files[i].name + '</a> <!-- <a href="#" class="del">delete</a> --> </li>'); } } else { $attachedFilesList.html('нет прикреплённых файлов'); } }
- Log in to post comments
- 2797 reads