javascript 用图像替换普通的文件上传输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7688996/
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
Replacing normal file upload input with an image
提问by Zaphod Beeblebrox
Bit of a newbie question here.
这里有一个新手问题。
I have a form and one of it's fields is for a file upload. Instead of having the boring old usual text input box with a 'choose file' button beside it, I'd like to have an image which when you click opens the dialog box to browse for the photo.
我有一个表单，其中一个字段用于文件上传。我想要一个图像，而不是在它旁边带有“选择文件”按钮的无聊的旧文本输入框，当您单击它时会打开对话框以浏览照片。
The way I was hoping to be able to do this was with two forms. IE when the user clicks the image a modal box appears with form upload input in it. User chooses file and clicks submit the user is returned to the form.
我希望能够做到这一点的方式有两种形式。IE 当用户单击图像时，会出现一个带有表单上传输入的模式框。用户选择文件并点击提交用户返回到表单。
That doesn't seem to work because having a form inside a form must be bad practice i suppose :) Is there a way to do it like this?
这似乎不起作用，因为在表单中包含表单一定是不好的做法，我想:) 有没有办法做到这一点？
The alternative is that I can somehow replace the usual text input box with the 'choose file' button with my own graphic but despite google I ain't found out how to do that.
另一种方法是，我可以用我自己的图形以某种方式用“选择文件”按钮替换通常的文本输入框，但尽管使用了谷歌，我还是不知道如何做到这一点。
Any ideas
有任何想法吗
回答by Bankin
Very simple solution - simply put a label tag for your input
非常简单的解决方案 - 只需为您的输入放置一个标签标签
<label for="uploadFile">
<div id="image"></div>
</label>
<input type="file" id="uploadFile" style="display:none" />
And the just add a background-imageproperty to the #image div :)
只需将background-image属性添加到 #image div :)
回答by Pointy
Because of the heap of security issues around how file inputs work, they're pretty hard to fix. What does work, however, is a scheme like this:
由于围绕文件输入的工作方式存在大量安全问题，因此很难修复。然而，有效的是这样的方案：
- Design your own look for a file input that's fairly close to the default one in size and shape
- Position your file input and a realfile input at the same place in your form, with the real one on top of yours
- Make the real input be transparent (that is, set the opacity to zero)
- 设计您自己的外观，寻找在大小和形状上与默认文件输入相当接近的文件输入
- 将您的文件输入和真实文件输入放在表单中的同一位置，真实输入在您的顶部
- 使真实输入透明（即，将不透明度设置为零）
Now clicks on your elements styled the way you want them to look will actually be interpreted by the browser as clicks on the file input. You have to tweak things somewhat for IE, because IE7 allows the user to type directly into the input while other browsers all immediately launch the file chooser when the element is clicked anywhere.
现在点击你想要的样式的元素实际上会被浏览器解释为点击文件输入。您必须对 IE 进行一些调整，因为 IE7 允许用户直接在输入中键入内容，而其他浏览器会在元素被单击任意位置时立即启动文件选择器。
edit— hereis a jsfiddle that works in Chrome at least. The HTML:
编辑——这是一个至少在 Chrome 中工作的 jsfiddle。HTML：
<div class='fancy-file'>
<div class='fancy-file-name'> </div>
<button class='fancy-file-button'>Browse...</button>
<div class='input-container'>
<input type='file'>
</div>
</div>
That wraps the "fake" file input that I'll style with my own CSS, as well as the real <input>element. Here's the CSS:
这包装了我将使用自己的 CSS 设置样式的“假”文件输入以及真实<input>元素。这是CSS：
div.fancy-file {
position: relative;
overflow: hidden;
cursor: pointer;
}
div.fancy-file-name {
float: left;
border-radius: 3px;
background-color: #aaa;
box-shadow:
inset 1px 1px 3px #eee,
inset -1px -1px 3px #888,
1px 1px 3px #222;
font-weight: bold;
font-family: Courier New, fixed;
width: 155px;
font-size: 12px;
padding: 1px 4px;
}
button.fancy-file-button {
float: left;
border-radius: 3px;
border: 1px solid red;
background-color: #F5BD07;
font-weight: bold;
vertical-align: top;
margin: 0 0 0 3px;
}
div.input-container {
position: absolute;
top: 0; left: 0;
}
div.input-container input {
opacity: 0;
}
The outer container is made "position: relative" to make it easy to position the real <input>over the fake stuff. The fake stuff has my made-up fancy styles, and it's sized so that it's just about the same as the overall size of a real file input. The real one is absolutely positioned and transparent.
外部容器被制成“位置：相对”，以便于将真货<input>放在假货上。假的东西有我编造的花哨的风格，它的大小与真实文件输入的整体大小几乎相同。真正的一个是绝对定位和透明的。
Here's some jQuery to drive it:
这里有一些 jQuery 来驱动它：
$('div.fancy-file input:file').bind('change blur', function() {
var $inp = $(this), fn;
fn = $inp.val();
if (/fakepath/.test(fn))
fn = fn.replace(/^.*\/, '');
$inp.closest('.fancy-file').find('.fancy-file-name').text(fn);
});
Browsers won't give you the complete pathname, but they'll give you a part of it. Some browsers (Chrome and IE) give you an obviously-fake path prefix, so the code strips that out (because it's useless).
浏览器不会给你完整的路径名，但他们会给你一部分。一些浏览器（Chrome 和 IE）给你一个明显是假的路径前缀，所以代码把它去掉（因为它没用）。
回答by Diodeus - James MacFarlane
File upload fields are quite limited. See: http://www.quirksmode.org/dom/inputfile.html
文件上传字段非常有限。见：http: //www.quirksmode.org/dom/inputfile.html
