Как изменить текст кнопки <input type = "file" />?

Question

<input type="file" value="Browse" name="avatar" id="id_avatar" />

Я пытался изменить value, но он не работает. Как настроить текст кнопки?

Answer 1

Использовать Bootstrap FileStyle , который используется для стилизации файловых полей форм. Это плагин для библиотеки компонентов на основе jQuery под названием Twitter Bootstrap

Пример использования:

Включает в себя:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

По JavaScript:

$(":file").filestyle();

Через атрибуты данных:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

Answer 2

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

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : В IE9 и IE10, если вы активируете onClick в файле, вводимом через javascript, форма будет помечена как «опасная» и не может быть отправлена ​​с помощью javascript, если вы не уверены, что она может быть отправлена ​​традиционно.

Answer 3

Скрыть файл ввода. Создайте новый ввод для захвата события щелчка и перешлите его на скрытый ввод:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

Answer 4

Текст «загрузить файл ...» предварительно задан браузером и не может быть изменен. Единственный способ обойти это - использовать компонент загрузки на основе Flash или Java, например swfupload .

Answer 5

Работает Отлично на всех браузерах Надеюсь, это будет работать и для вас.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Замените content: 'Select some files'; на нужный вам текст в ''

ЕСЛИ НЕ РАБОТАЕТ С Firefox, тогда используйте это вместо ввода:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Answer 6

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

больше http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Answer 7

Этот является плагином JQuery для изменения текста кнопки элемента входного файла.

Пример HTML:

<input type="file" id="choose-file" />

Пример JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Результат:

Answer 8

Я думаю, это то, что вы хотите:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 

Answer 9

Просто

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Изменить с помощью фрагмента]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

Answer 10

Используйте <label> для подписи

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

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

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}