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

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

Если надо кастомный вид поля загрузки файла (почти всегда), то само поле можно скрыть и работать с ним с помощью 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);
});

Демо:

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.