Изменить текст по умолчанию в поле ввода type = "file"?

Question

Я хочу изменить текст по умолчанию для кнопки "Choose File", когда мы используем input="file".

Как я могу это сделать?Также, как вы можете видеть на изображении, кнопка находится на левой стороне текста.Как я могу поставить его на правой стороне текста?

Answer 1

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Это пока лучший вариант

Answer 2

Вы можете использовать этот подход, он работает, даже если много файлов ввода.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})

.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

Answer 3

Хорошо, очень простой чистый CSS-способ создания пользовательского входного файла.

Используйте ярлыки, но, как вы знаете из предыдущих ответов, ярлык не вызывает onclick Функция в Firefox, может быть ошибкой, но не имеет значения при следующем.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

То, что вы делаете, это стиль этикетки, чтобы выглядеть так, как вы хотите

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

теперь просто скрыть фактическую кнопку ввода, но вы не можете установить ее на visability: hidden

Так что сделайте невидимым, установив opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

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

Answer 4

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

Вот как это выглядело , когда я закончил (за исключением способности перетаскивания, есть множество уроков о том, как это сделать).

И затемНа самом деле я создал серию постов в блоге , которые в основном касаются кнопок загрузки файлов.

Answer 5

Это должно работать:

input. className :: - webkit-file-upload-button { стиль контента .. }