<input type="file" value="Browse" name="avatar" id="id_avatar" />
Я попытался изменить value, но он не работает. Как настроить текст кнопки?
Как изменить текст кнопки <input type="file"/">?
Ответ 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.">
Ответ 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, не уверен, что ее можно отправить традиционно.
Ответ 3
Скрыть ввод файла. Создайте новый вход для захвата события клика и переместите его на скрытый ввод:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
Ответ 4
Текст "загрузить файл..." предварительно определен браузером и не может быть изменен. Единственный способ обойти это - использовать компонент загрузки на основе Flash или Java, например swfupload.
Ответ 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">
Ответ 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/
Ответ 7
Это является плагином JQuery для изменения текста кнопки элемента входного файла.
Пример HTML:
<input type="file" id="choose-file" />
Пример JS:
$('#choose-file').inputFileText({
text: 'Select File'
});
Результат:
Ответ 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">
Ответ 9
EDIT: теперь я вижу комментарии, которые вы задаете о тексте кнопки, а не о пути файла. Виноват. Я оставлю свой первоначальный ответ ниже, если кто-то, кто наткнулся на этот вопрос, интерпретирует его так, как я изначально сделал.
2nd EDIT: я удалил этот ответ, потому что решил, что я неправильно понял этот вопрос, и мой ответ не был уместным. Тем не менее, комментарии в другом ответе указывают на то, что люди все еще хотели видеть этот ответ, поэтому я его отменяю.
МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ (я думал, что OP спрашивает о пути, а не о тексте кнопки):
Это не поддерживается по соображениям безопасности. Веб-браузер Opera поддерживал это, но он был удален. Подумайте, что было бы возможно, если бы это было поддержано; Вы можете создать страницу с файлом, загружающим входные данные, предварительно заполнить его с помощью пути к некоторому чувствительному файлу, а затем автоматически отправить форму с помощью javascript, вызванного событием onload. Это может произойти слишком быстро, чтобы пользователь мог что-то сделать.
Ответ 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;
}
Ответ 11
Просто
<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>Ответ 12
- До этого
<input type="file">, добавьте изображение и<input style="position:absolute">он займет пространство<input type="file"> -
Используйте следующий CSS для элемента файла
position:relative; opacity:0; z-index:99;
Ответ 13
Только 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>
Ответ 14
Если вы используете рельсы и имеете проблему, примените его, я хотел бы добавить несколько советов из оригинального ответа, отправленного @Fernando Kosh
- Скачать файл zip и скопировать файл bootstrap-filestyle.min.js ke folder app/assets/javascripts/
-
откройте приложение application.js и добавьте эту строку ниже
//= требуется bootstrap-filestyle.min
-
откройте кофе и добавьте эту строку
$( ": file" ). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Ваш текст здесь", значок: false});
Ответ 15
Вы можете просто добавить некоторые трюки 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" />Ответ 16
Вот способ "изменить" текст ввода с типом файла, с чистым HTML и javascript:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
Ответ 17
Это альтернативное решение, которое может вам помочь. Это скрывает текст, который появляется из кнопки, смешивая его с фоновым цветом 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>