Как настроить?

Question

Можно ли изменить внешний вид <input type="file">?

Answer 1

Вы не можете сильно изменить сам элемент управления input[type=file].

Поскольку щелчок по элементу label, правильно сопряженному с входом, активирует / фокусирует его, мы можем использовать label для запускадиалог просмотра ОС.

Вот как вы можете это сделать ...

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

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

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

Существует замечательное руководство от Tympanus для стилизации этого.

Answer 2

Может быть, что-то подобное?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput]')[0].files[0].name);
});

</script>

Answer 3

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

почему бы и нет? ^ _ ^

См. Пример здесь

Answer 4

Если вы используете bootstrap , вот лучшее решение:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

Для IE8 и ниже http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Источник: https://stackoverflow.com/a/18164555/625952

Answer 5

Самый простой способ ..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

Answer 6

В webkit вы можете попробовать это ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Answer 7

Прежде всего это контейнер:

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

Во-вторых, это стиль CSS, если вы хотите больше настраивать, просто держать глаза открытыми:)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

Этот пример не имеет стиля для текста внутри кнопки, он зависит от размера шрифта, просто исправьте значения высоты и отступа для контейнера

Answer 8

Намного лучше, если вы просто используете <label>, скрываете <input> и настраиваете метку.

HTML:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS:

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

Answer 9

Хитрость в том, чтобы скрыть ввод и настроить метку.

HTML:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS:

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS:

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

Вы можете проверить этот пример: https://jsfiddle.net/rjurado/hnf0zhy1/4/

Answer 10

Пример начальной загрузки

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>