Стилизация кнопки input type="file"

Стилизация полей ввода типа file notoriously сложна, так как большинство браузеров не позволяют изменять их внешний вид с помощью CSS или JavaScript.

Даже размер элемента не поддается таким стилям, как:

<input type="file" style="width:200px">

Вместо этого вам нужно использовать атрибут size:

<input type="file" size="60" />

Для более сложного оформления (например, изменения внешнего вида кнопки «Обзор») вам придется прибегнуть к хитрости с наложением стилизованной кнопки и поля ввода на нативный элемент file input. Статья, упомянутая rm на сайте http://www.quirksmode.org/dom/inputfile.html, является одной из лучших, что я видел.

ОБНОВЛЕНИЕ

Хотя сложно напрямую стилизовать тег <input>, это легко сделать с помощью тега <label>. Смотрите ответ ниже от @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Чтобы создать пользовательские стили для вашей формы загрузки файлов, выполните следующие шаги:

1. Вот простой HTML-код формы (обратите внимание на комментарии, которые я добавил ниже):

   <form action="#введите ваше действие здесь" method="POST" enctype="multipart/form-data">
     <div id="yourBtn" style="height: 50px; width: 100px; border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Нажмите для загрузки!</div>
     <!-- это ваш тег ввода файла, который я скрываю!-->
     <div style='height: 0px; width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- здесь вы можете разместить кнопку отправки файла или написать простой скрипт для автоматической загрузки файла -->
     <input type="submit" value='отправить' >
   </form>
   

2. Затем используйте этот простой скрипт, чтобы передать событие нажатия на тег ввода файла.

   function getFile(){
        document.getElementById("upfile").click();
   }
   

Теперь вы можете использовать любые стили без заботы о том, как изменить стандартные стили.

Я очень хорошо знаю об этом, потому что пытался изменить стандартные стили целый месяц. Поверьте, это очень сложно, так как разные браузеры имеют разные теги ввода для загрузки файлов. Поэтому используйте этот подход, чтобы создавать свои пользовательские формы загрузки файлов. Вот полный код С АВТОМАТИЧЕСКОЙ ЗАГРУЗКОЙ.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#введите ваше действие здесь" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">Нажмите для загрузки файла</div>
  <!-- это ваш тег ввода файла, который я скрываю!-->
  <!-- я использовал событие onchange для вызова отправки формы -->
  <div style='height: 0px; width: 0px; overflow: hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- здесь вы можете разместить кнопку отправки файла или написать простой скрипт для автоматической загрузки файла -->
  <!-- <input type="submit" value='отправить' > -->
</form>

С помощью этих шагов вы можете создать пользовательскую форму загрузки файлов с желаемыми стилями.

Чтобы скрыть элемент с помощью CSS и использовать кастомную кнопку для активации кнопки выбора файлов с помощью $(selector).click(), можно установить интервал для проверки значения поля типа файла. Этот интервал может отображать значение для пользователя, чтобы он видел, что загружается. Интервал будет очищен при отправке формы.

Вот пример кода, который иллюстрирует этот подход:

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- Имя файла для отображения пользователю -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Скрываем этот элемент от пользователей с помощью CSS display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Стилизуем эту кнопку с помощью type image или CSS по вашему усмотрению -->
    <input id="browse-click" type="button" class="button" value="Обзор файлов"/>

    <!-- Кнопка отправки -->
    <input type="submit" class="button" value="Изменить"/>
</div>
</form>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // используйте .live() для старых версий jQuery
        $('#file-type').click();
        var interval = setInterval(intervalFunc, 1); // Устанавливаем интервал
        $('#file-type').on('change', function() {
            clearInterval(interval); // Очищаем интервал при выборе файла
        });
        return false;
    });
});

Таким образом, когда пользователь нажимает на кнопку "Обзор файлов", будет активироваться скрытая кнопка выбора файла, и интервал будет обновлять текст с именем файла в реальном времени. Интервал будет остановлено, когда файл выбран и значение изменится.

Вы можете достичь своей цели без jQuery, используя обычный JavaScript. Вот пример, как это сделать:

<style>
.new_Btn {
  /* Ваши CSS свойства */
  cursor: pointer; /* Добавляем указатель для кнопки */
  /* Другие стили */
}

#html_btn {
  display: none; /* Скрываем оригинальную кнопку */
}
</style>

<script>
document.querySelector('.new_Btn').addEventListener('click', function() {
  document.getElementById('html_btn').click();
});
</script>

<div class="new_Btn">Выбрать изображение</div><br>
<input id="html_btn" type="file" /><br>

Теперь new_Btn связано с html_btn, и вы можете стилизовать вашу новую кнопку так, как вам хочется! 😊

Рабочий пример с поддержкой нативного перетаскивания: https://jsfiddle.net/j40xvkb3/

При стилизации элемента <input type="file"> необходимо сохранять все нативные взаимодействия, которые предоставляет этот элемент.

Использование подхода display: none нарушает поддержку нативного перетаскивания и вставки файлов.

Чтобы ничего не сломать, рекомендуется использовать opacity: 0, а элемент позиционировать с помощью относительного или абсолютного позиционирования в обертке.

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

HTML:

<label for="test">
  <div>Кликните или перетащите файл сюда</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Вот рабочий пример (с дополнительным JS для обработки события dragover и загруженных файлов).

https://jsfiddle.net/j40xvkb3/

Надеюсь, это поможет!