Как переименовать кнопку “обзора” HTML входа type=file?
Еще одна причина, по которой это может произойти: сегодня вечером я встретил страшную ошибку и в конце концов обнаружил, что ошибочное перетаскивание мыши, по-видимому, переместило один из классов моих собственных пакетов в иерархию другого. На самом деле нет конца тому, как вы можете ввернуться в среду Eclipse.
6 ответов
Кнопка не называется "кнопкой просмотра" - это просто название, которое дает ей ваш браузер. Браузеры могут реализовать управление загрузкой файлов, как им нравится. В Safari, например, он называется «Выбрать файл» и находится на противоположной стороне того, что вы, вероятно, используете.
Вы можете реализовать собственный внешний вид элемента управления загрузкой, используя метод, описанный в QuirksMode ], но это выходит за рамки простого изменения текста кнопки.
Немного JavaScript позаботится об этом:
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
Не самое красивое решение, но оно работает.
Поле input type = "file" очень сложно, потому что оно ведет себя по-разному в каждом браузере, его нельзя стилизовать или можно немного стилизовать, опять же, в зависимости от браузера; и его трудно изменить (опять же, в зависимости от браузера, он может иметь минимальный размер, который нельзя перезаписать).
Однако есть обходные пути. Лучшим, на мой взгляд, является этот (результат здесь ).
Нет, вы не можете изменить текст ввода для загрузки файла. Но есть некоторые уловки, чтобы наложить изображение на кнопку.
Вы также можете использовать Uploadify, отличный плагин для загрузки jQuery, он позволяет загружать несколько файлов, а также легко настраивать поля файлов. http://www.uploadify.com
Насколько мне известно, вы не можете изменить текст кнопки, это жестко запрограммировано в браузерах.
Но есть несколько обходных путей, чтобы поместить кнопку с другим текстом / изображением в форму: