Как переименовать HTML кнопку «Обзор» для типа ввода = файл?

Question

Как переименовать кнопку просмотра в « Выберите файл »? E.g.:

<input type=file name=browse >

Answer 1

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

Answer 2

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

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

Answer 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();"/>

Не самое привлекательное решение, но оно работает.

Answer 4

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

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

демо

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

ссылка

Answer 9

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

Answer 10

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