Как я могу интернационализировать текст кнопки в файле? Например, что этот код представляет пользователю:
<input type="file" .../>
Как я могу интернационализировать текст кнопки в файле? Например, что этот код представляет пользователю:
<input type="file" .../>
Обычно он предоставляется браузером и его трудно изменить, поэтому единственный способ его использования - это взлом CSS/JavaScript,
Для некоторых подходов см. следующие ссылки:
Сделайте шаг назад! Во-первых, вы предполагаете, что пользователь использует иностранную локаль на своем устройстве, что не является хорошим предположением для обоснования принятия текста кнопки в подборщике файлов и позволяет говорить, что вы хотите к.
Разумно, что вы хотите контролировать каждый элемент языка, видимый на вашей странице. Однако содержимое элемента "Загрузка файлов" не является частью HTML. Для этого элемента управления больше контента, например, в WebKit, он также говорит "Нет файла" рядом с кнопкой.
Есть очень хакерские обходные пути, которые пытаются это сделать (например, как упоминалось в ответе @ChristopheD), но ни один из них не преуспеет:
Отличие от встроенных элементов управления всегда является рискованным, существует целый ряд различных устройств, которые могут использовать ваши пользователи, и независимо от того, что вы выбрали, вы не будете тестировать его на каждом из этих устройств.
Тем не менее, существует еще большая причина, по которой все попытки не срабатывают с точки зрения пользователя: за этим элементом управления находится даже больше нелокализованного контента, сам диалог выбора файлов. После того, как пользователь подвергнется обходу своей файловой системы или что не выбрать файл для загрузки, они будут подвергнуты локальному языку операционной системы хоста.
Вы уверены, что у вас есть справедливость, отклоняясь от собственного элемента управления, просто чтобы локализовать текст, когда, как только они нажмут на него, они все равно получат локальную ОС?
Лучшее, что вы можете сделать для своих пользователей, это обеспечить, чтобы у вас было адекватное локализованное руководство, связанное с вашим контролем ввода файлов. (например, метка поля формы, текст подсказки, текст всплывающей подсказки).
К сожалению.: - (
-
Этот ответ предназначен для тех, кто ищет оправдание, чтобы не локализовать контроль загрузки файлов.
Вы получаете свой язык браузера для своей кнопки. Невозможно изменить его программно.
Чистое решение 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>
Я мог бы создать кнопку с помощью 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.
Чтобы создать пользовательское решение "кнопка обзора", просто попробуйте сделать скрытую кнопку обзора, пользовательскую кнопку или элемент и несколько 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());
});
});
гораздо проще использовать его
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>