@kiril9011

Как стилизовать input type=file?

Есть код:

<label for="uploadbtn" class="uploadButton">Загрузить файл</label>
                  <input type=hidden name='MAX_FILE_SIZE' value='3000000'><input type=file name=file2 style="opacity: 0; z-index: -1;" id="uploadbtn"><br>

Стилизация type=file отлично работает, но как сделать, чтобы после выбора файла вместо "Загрузить файл" было имя файла или "Файл выбран"?
  • Вопрос задан
  • 8085 просмотров
Решения вопроса 3
Stalker_RED
@Stalker_RED
Никак.
Сделай его прозрачным, и под ним напиши что угодно. Можно даже котика нарисовать.
Ответ написан
стили сами напишите
<label class="form-control"> 
	<input class="form-control" type="file" name="data[file]" placeholder="Прикрепите файл" style="display: none;">
 	<button class="js-labelFile"> 
 		<span class="js-fileName">Прикрепить файл</span> 
 	</button> 
</label>

$(function(){
		$('input[type=file]').each(function() {
      var $input = $(this),
          $label = $input.next('.js-labelFile'),
          labelVal = $label.html();

      $input.hide();
      $input.on('change', function(element) {
          var fileName = '';
          if (element.target.value) fileName = element.target.value.split('\\').pop();
          fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
      });
    });
	});
Ответ написан
Комментировать
xEpozZ
@xEpozZ
Веб-разработчик
Здесь применяют технику создания и показа фейк-объекта, а реальный объект существует в DOM'е, но скрыт.
Вот понятный пример, правда статья из 2015-го года.
https://tympanus.net/codrops/2015/09/15/styling-cu...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы