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

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

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

html dialog internationalization
person mkoryak    schedule 26.03.2009    source источник
comment
stackoverflow.com/questions/1944267/   -  person Avatar    schedule 14.06.2016

Ответы (7)


arrow_upward
18
arrow_downward

Решение на чистом 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/2015/09/15/styling-customizing-file-inputs-smart-way/

person mb21    schedule 03.03.2016

arrow_upward
34
arrow_downward

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

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

person ChristopheD    schedule 26.03.2009
comment
Обратите внимание, что браузер может вызвать предупреждение о кликджекинге (в настоящее время в FF + NoScript и IE9, IIRC), поскольку это тот же технический метод. - person Piskvor left the building; 23.11.2011
comment
Это единственно правильный ответ на вопрос здесь. Относительно просто изменить стиль элемента ввода файла, не предупреждая об этом пользователя. - person Ray Nicholus; 05.03.2013

arrow_upward
17
arrow_downward

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

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

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

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

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

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

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

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

Прости. :-(

--

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

person Lee Kowalkowski    schedule 27.07.2015

arrow_upward
13
arrow_downward

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

person Seb    schedule 26.03.2009
comment
мне нравится ваш ответ, потому что это означает, что мне не нужно ничего делать =) но решение, приведенное ниже, похоже, будет работать - person mkoryak; 26.03.2009
comment
Кажется так! :) Использование JavaScript может помочь, но будьте осторожны, это не сработает для пользователей с отключенным JS, и вы получите разные макеты. Кроме того, сначала вы увидите макет (обычная кнопка), а после небольшой задержки - изменение через JS. - person Seb; 26.03.2009
comment
решение под вами, когда я смотрю на него; Себа - последний ответ :) - person The Red Pea; 21.10.2016

arrow_upward
11
arrow_downward

намного проще использовать это

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

arrow_upward
3
arrow_downward

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

person Joy    schedule 05.03.2013

arrow_upward
2
arrow_downward

Чтобы создать собственное решение для «кнопки просмотра», просто попробуйте создать скрытую кнопку просмотра, настраиваемую кнопку или элемент и некоторый 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());
    });
});
person Nimjox    schedule 19.08.2014