jquery получить имя файла input file

52
Алексей,

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

Например. Верстка:

<label for="review-file" class="review-file-label">
	<span>Прикрепить фото</span>
	<input type="file" id="review-file" accept="image/*" style="display: none" name="photo">
</label>

Получаем название загружаемого файла и вставляем его в span

$('#review-file').on('change', function (e) {
	$(this).prev('span').html(e.target.files[0].name);
});

Можно вывести само изображение

$('#review-file').on('change', function (e) {
	span = $(this).prev('span');
	span.html(e.target.files[0].name);
        	
	newImg = $('<img />');
	var reader = new FileReader();
	
	reader.onload = function (r) {
		newImg.attr('src', r.target.result).attr('style', 'width: 100px; height: auto');
	}
	
	reader.readAsDataURL(e.target.files[0]);
	newImg.appendTo(span);
});

Демо:

Опубликовано 18 июня 2021
верстка, jquery, костыли
Поделиться
Похожие статьи
Анимация при скроллинге 0
Простенький jQuery скрипт для добавления анимации блоков, при их появлении на экране. Можно использо...
Читать дальше »
Алексей,
Комментарии
Зарегистрируйтесь чтобы получать уведомления об ответе
Если надо кастомный вид поля загрузки файла (почти всегда), то само поле можно скрыть и работать с ним с помощью js