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

Ответ 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

Ответ 2

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

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

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

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

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

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

Вы уверены, что у вас есть справедливость, отклоняясь от собственного элемента управления, просто чтобы локализовать текст, когда, как только они нажмут на него, они все равно получат локальную ОС?

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

К сожалению.: - (

-

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

Ответ 3

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

Ответ 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>

Ответ 5

Я мог бы создать кнопку с помощью 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.

Ответ 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());
    });
});

Ответ 7

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

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