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

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

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

Используйте 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.">

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

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');
});

ПРЕДУПРЕЖДЕНИЕ . В IE9 и IE10, если вы запускаете onClick в файле, вводимом через javascript, форма будет помечена как «опасная» и не может быть отправлена ​​с помощью javascript, не будучи уверенным, что она может быть отправлена ​​традиционно.

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

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

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

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

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">

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

Пример HTML:

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

Пример JS:

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

Результат:

<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/

Просто

<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>

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

<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"> 

РЕДАКТИРОВАТЬ : я вижу теперь по комментариям, которые вы спрашиваете о тексте кнопки, а не путь к файлу. Виноват. Я оставлю свой первоначальный ответ ниже на тот случай, если кто-то, кто наткнется на этот вопрос, интерпретирует его так, как я это сделал изначально.

2-е РЕДАКТИРОВАНИЕ : я удалил этот ответ, потому что я решил, что я неправильно понял вопрос, и мой ответ не имеет отношения. Тем не менее, комментарии в другом ответе указали, что люди все еще хотели видеть этот ответ, поэтому я его удаляю.

МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ (я думал, что ОП спрашивает о пути, а не о кнопке):

Это не поддерживается в целях безопасности . Веб-браузер Opera раньше поддерживал это, но он был удален. Подумайте, что было бы возможно, если бы это было поддержано; Вы можете создать страницу с вводом для загрузки файла, предварительно заполнив ее путем к некоторому конфиденциальному файлу, а затем автоматически отправить форму, используя JavaScript, вызванный onloadсобытием. Это может произойти слишком быстро для пользователя, чтобы что-то с этим сделать.

Использовать <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;
}

Только CSS и класс начальной загрузки

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

1. Перед этим <input type="file">добавьте изображение и <input style="position:absolute">оно будет занимать пространство<input type="file">

2. Используйте следующий CSS для элемента file

   position:relative;  
   opacity:0;  
   z-index:99;

Если вы используете рельсы и у вас возникли проблемы с их применением, я бы хотел добавить несколько советов из оригинального ответа @Fernando Kosh

• Скачайте файл zip и скопируйте файл bootstrap-filestyle.min.js в папку app / assets / javascripts /

• откройте файл application.js и добавьте эту строку ниже

  // = требуется bootstrap-filestyle.min

• открой свой кофе и добавь эту строку

  $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Ваш текст здесь", icon: false});

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

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

<input type="file" class="btn-file-upload" value="Uploadfile" />

Вот способ «изменить» текст ввода с типом файла, с чистым HTML и javascript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

для меня это не работает пользовательский текст с bootstrap-filestyle . Это помогает с оформлением кнопок, но текст его странно изменить, прежде чем заняться борьбой с CSS, я попробую следующее:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle отображает компонент в виде span с классом butonText, поэтому при загрузке документа просто измените текст. легко и правильно, и он должен работать во всех браузерах.

ура

Я сделал это так для моего проекта:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Это альтернативное решение, которое может вам помочь. Это скрывает текст, который появляется вне кнопки, смешивая его с цветом фона div. Затем вы можете дать div название, которое вам нравится.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>