Как переименовать HTML-кнопку "просмотреть" входного типа = файл?

Ответ 1

Кнопка не называется "кнопкой обзора" - это просто имя, которое ваш браузер дает для нее. Браузеры могут свободно осуществлять управление загрузкой файлов, как им нравится. Например, в Safari он называется "Выбрать файл", и он находится на противоположной стороне того, что вы, вероятно, используете.

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

Ответ 2

<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("browse");
    fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>

http://jsfiddle.net/J8ekg/

Ответ 3

Немного 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();"/>

Не самое приятное решение, но оно работает.

Ответ 4

• Оберните <input type="file"> тегом <label>;
• Добавьте тег (с текстом, который вам нужен) внутри метки, например <span> или <a>;
• Сделать этот тег похожим на кнопку;
• Сделайте input[type="file"] невидимым через display: none.

Ответ 5

Вы можете сделать это с помощью простого css/jq обходного пути: Создайте поддельную кнопку, которая запускает скрытую кнопку обзора.

HTML

<input type="file"/>
<button>Open</button>

CSS

input { display: none }

JQuery

$( 'button' ).click( function(e) {
    e.preventDefault(); // prevents submitting
    $( 'input' ).trigger( 'click' );
} );

демо

Ответ 6

Поле input type="file" очень сложно, потому что оно ведет себя по-разному в каждом браузере, его нельзя стилизовать или немного стилизовать в зависимости от браузера; и трудно изменить размер (в зависимости от браузера, он может иметь минимальный размер, который нельзя перезаписать).

Однако есть обходные пути. Лучше всего, на мой взгляд, этот (результат здесь).

Ответ 7

AFAIK вы не можете изменить текст кнопки, он жестко закодирован в браузерах.

Но существует несколько способов обхода кнопки с другим текстом/изображением в форме:

ссылка

Ответ 8

Вот лучший, простой, короткий и чистый способ "переименовать" текст ввода с типом файла и без JQuery, с чистым HTML и javascript:

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

Ответ 9

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

Ответ 10

Вы также можете использовать Uploadify, который является отличным плагином загрузки jQuery, он позволяет загружать несколько файлов, а также легко стилять поля файлов. http://www.uploadify.com