Кнопка загрузки файла маркировки

Question

Как я могу интернационализировать текст кнопки выбора файлов? Например, что этот код представляет пользователю:

 <input type="file" .../>

Answer 1

Обычно он предоставляется браузером и его трудно изменить, поэтому единственным способом обойти это будет взлом CSS / JavaScript,

См. Следующие ссылки для некоторых подходов:

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
• http://www.quirksmode.org/dom/inputfile.html
• http://www.dreamincode.net/forums/showtopic15621.htm

Answer 2

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

Разумно, что вы хотите контролировать каждый элемент языка, видимый на вашей странице. Однако содержимое элемента управления выгрузкой файлов не является частью HTML. За этим элементом управления находится больше контента, например, в WebKit, рядом с кнопкой также написано «Файл не выбран».

Существуют очень хакерские обходные пути, которые пытаются это сделать (например, как те, что упомянуты в ответе @ ChristopheD), но ни один из них действительно не удался:

• Для средства чтения с экрана элемент управления файлом будет по-прежнему говорить «Обзор ...» или «Выбрать файл», и пользовательская загрузка файла не будет объявлена ​​как элемент управления загрузкой файла, а будет просто кнопкой или вводом текста.
• Многие из них не могут отобразить выбранный файл или показать, что пользователь больше не выбирал файл
• Многие из них не похожи на встроенный элемент управления, поэтому могут показаться странными на нестандартных устройствах.
• Поддержка клавиатуры, как правило, плохая.
• Созданный автором компонент пользовательского интерфейса никогда не может быть настолько полнофункциональным, как его собственный эквивалент (и чем ближе вы будете вести себя, полагая, что IE10 в Windows 7, тем больше он будет отклоняться от других комбинаций браузера и операционной системы).
• Современные браузеры поддерживают перетаскивание в собственный элемент управления загрузкой файлов.
• Некоторые методы могут вызывать эвристику в программном обеспечении безопасности как потенциальная попытка «нажми», чтобы обманом заставить пользователя загрузить файл.

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

Однако есть еще более веская причина, по которой все попытки терпят неудачу с точки зрения пользовательского опыта: за этим элементом управления находится еще больше нелокализованного контента - самого диалога выбора файла. Как только пользователь подвергнется обходу своей файловой системы или не выберет файл для загрузки, он будет подчинен языку операционной системы хоста.

Вы уверены, что оправдываете своего пользователя, отклоняясь от нативного элемента управления, просто для локализации текста, когда, как только он щелкнет по нему, они все равно получат локаль операционной системы?

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

Извините. : - (

-

Этот ответ предназначен для тех, кто ищет обоснование , а не для локализации элемента управления загрузкой файлов.

Answer 3

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

Answer 4

Чистое решение CSS:

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file (Click me)</label>

источник: http://tympanus.net/codrops

Answer 5

гораздо проще использовать

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

Answer 6

Чтобы создать собственное решение «кнопки обзора», просто попробуйте создать скрытую кнопку обзора, пользовательскую кнопку или элемент и немного Jquery. Таким образом, я не изменяю фактическую «кнопку обзора», которая зависит от каждого браузера / версии. Вот пример .

HTML:

<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>

CSS:

#import {
  margin: 0em 0em 0em .2em;
  content: 'Import Settings';
  display: inline-block;
  border: 1px solid;
  border-color: #ddd #bbb #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 700;
  font: bold 12px/1.2 Arial,sans-serif !important;
  /* fallback */
  background-color: #f9f9f9;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}

.hideMe{
    display: none;
}

JS:

$("#import").click(function() {
    $("#browser").trigger("click");
    $('#browser').change(function() {
            alert($("#browser").val());
    });
});

Answer 7

Я мог бы получить кнопку, используя jQueryMobile со следующим кодом:

<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>

Над кодом создается кнопка «Загрузить» (пользовательский текст). При нажатии кнопки загрузки запускается просмотр файлов. Протестировано с Chrome 25 и IE9.