Html 标签文件上传按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/686905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Labeling file upload button
提问by mkoryak
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
如何国际化文件选择器的按钮文本？例如，这段代码呈现给用户的内容：
<input type="file" .../>
采纳答案by mb21
Pure CSS solution:
纯 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>source: http://tympanus.net/codrops
回答by ChristopheD
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
它通常由浏览器提供并且难以更改，因此唯一的解决方法是 CSS/JavaScript hack，
See the following links for some approaches:
有关某些方法，请参阅以下链接：
回答by Lee Kowalkowski
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what youwant it to.
退后一步！首先，您假设用户在他们的设备上使用外国语言环境，这并不是一个合理的假设来证明接管文件选择器的按钮文本并使其说出您想要的内容。
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
您想要控制页面上可见的每一项语言是合理的。但是，文件上传控件的内容不是 HTML 的一部分。这个控件后面还有更多的内容，例如在WebKit中，按钮旁边还显示“未选择文件”。
There are very hacky workarounds that attempt this (e.g. like those mentioned in @ChristopheD's answer), but none of them truly succeed:
有一些非常棘手的解决方法可以尝试这样做（例如，就像@ChristopheD 的回答中提到的那样），但没有一个真正成功：
- To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
- Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
- Many of them look nothing like the native control, so might look strange on non-standard devices.
- Keyboard support is typically poor.
- An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
- Modern browsers support drag & drop into the native file upload control.
- Some techniques may trigger heuristics in security software as a potential ‘click-Hymaning' attempt to trick the user into uploading file.
- 对于屏幕阅读器，文件控件仍会显示“浏览...”或“选择文件”，并且自定义文件上传不会被宣布为文件上传控件，而只是一个按钮或文本输入。
- 其中许多无法显示所选文件，或显示用户已不再选择文件
- 它们中的许多看起来与本机控件完全不同，因此在非标准设备上可能看起来很奇怪。
- 键盘支持通常很差。
- 一个作者创建的 UI 组件永远不可能像它的本机等效物一样完整（并且你越接近它的行为假设 Windows 7 上的 IE10，它就越偏离其他浏览器和操作系统组合）。
- 现代浏览器支持拖放到本机文件上传控件中。
- 某些技术可能会在安全软件中触发试探法，作为潜在的“点击劫持”尝试诱使用户上传文件。
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
偏离本机控件始终是一件有风险的事情，您的用户可能会使用大量不同的设备，无论您选择什么解决方法，您都不会在这些设备中的每一个中进行测试。
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
然而，从用户体验的角度来看，所有尝试都失败还有一个更大的原因：在这个控件后面还有更多的非本地化内容，文件选择对话框本身。一旦用户需要遍历他们的文件系统或不选择要上传的文件，他们将受到主机操作系统区域设置的影响。
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
您确定您通过偏离本机控件来为您的用户做任何正义，只是为了本地化文本，当他们点击它时，他们无论如何都会获得操作系统区域设置？
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
您能为您的用户做的最好的事情是确保您有足够的本地化指南围绕您的文件输入控件。（例如表单字段标签、提示文本、工具提示文本）。
Sorry. :-(
对不起。:-(
--
——
This answer is for those looking for any justification notto localise the file upload control.
这个答案适用于那些寻找任何理由不本地化文件上传控件的人。
回答by Seb
You get your browser's language for your button. There's no way to change it programmatically.
您可以为您的按钮获取浏览器的语言。无法以编程方式更改它。
回答by Riajul Islam
much easier use it
更容易使用它
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
回答by Joy
I could achieve a button using jQueryMobile with following code:
我可以通过以下代码使用 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;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
上面的代码创建了一个“上传”按钮（自定义文本）。单击上传按钮后，将启动文件浏览。使用 Chrome 25 和 IE9 进行测试。
回答by Nimjox
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
要制作自定义的“浏览按钮”解决方案，只需尝试制作隐藏的浏览按钮、自定义按钮或元素以及一些 Jquery。这样我就不会修改依赖于每个浏览器/版本的实际“浏览按钮”。这是一个例子。
HTML:
HTML：
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
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:
JS：
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
