CSS 用图像替换输入类型=文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2855589/
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
Replace input type=file by an image
提问by Nicolas
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting onetoo (but does not work on Chrome =/).
像很多人一样，我想自丑input type=file，我知道，它不能没有一些黑客和/或完成javascript。但是，问题是在我的情况下，上传文件按钮仅用于上传图像（jpeg|jpg|png|gif），所以我想知道是否可以使用“ clickable”图像，它可以完全用作输入类型文件（显示对话框，并在提交的页面上显示相同的 $_FILE）。
我在这里找到了一些解决方法，这个也很有趣（但不适用于 Chrome =/）。
What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
当您想为文件按钮添加一些样式时，你们会怎么做？如果您对此有任何看法，只需点击回答按钮；)
回答by hardsetting
This works really well for me:
这对我来说非常有效：
.image-upload>input {
display: none;
}<div class="image-upload">
<label for="file-input">
<img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
</label>
<input id="file-input" type="file" />
</div>Basically the forattribute of the label makes it so that clicking the label is the same as clicking the specified input.
基本上标签的for属性使得单击标签与单击指定的输入相同。
Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.
此外，将 display 属性设置为 none 使得文件输入根本不呈现，将其隐藏得很好而且干净。
Tested in Chrome but according to the web should work on all major browsers. :)
在 Chrome 中测试，但根据网络应该适用于所有主要浏览器。:)
EDIT:Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
编辑：在此处添加 JSFiddle：https ://jsfiddle.net/c5s42vdz/
回答by Nicolas
Actually it can be done in pure css and it's pretty easy...
实际上它可以在纯 css 中完成，而且很容易......
HTML Code
HTML代码
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
CSS Styles
CSS 样式
label.filebutton {
width:120px;
height:40px;
overflow:hidden;
position:relative;
background-color:#ccc;
}
label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.
这个想法是将输入绝对放置在您的标签内。将输入的字体大小设置为大一些，这将增加“浏览”按钮的大小。然后使用负的 left / top 属性进行一些试验和错误，以将输入浏览按钮放置在标签后面。
When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)
定位按钮时，将 alpha 设置为 1。完成后将其设置回 0（这样您就可以看到自己在做什么！）
Make sure you test across browsers because they'll all render the input button a slightly different size.
确保跨浏览器进行测试，因为它们都会使输入按钮的大小略有不同。
回答by rishi
Great solution by @hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows
@hardsetting 很好的解决方案，但我做了一些改进以使其在 Windows 中与 Safari(5.1.7) 一起使用
.image-upload > input {
visibility:hidden;
width:0;
height:0
}<div class="image-upload">
<label for="file-input">
<img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>I have used visibility: hidden, width:0instead of display: nonefor safari issue and added pointer-events: nonein imgtag to make it working if input file type tag is in FORM tag.
如果输入文件类型标签在 FORM 标签中，我已经使用visibility: hidden, width:0而不是display: nonesafari 问题并添加pointer-events: none了img标签以使其工作。
Seems working for me in all major browsers.
似乎在所有主要浏览器中都对我有用。
Hope it helps someone.
希望它可以帮助某人。
回答by Pekka
I would use SWFUploador Uploadify. They need Flash but do everything you want without troubles.
我会使用SWFUpload或Uploadify。他们需要 Flash，但可以毫无困难地做您想做的一切。
Any <input type="file">based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I thinkin the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
任何<input type="file">基于变通方法，试图触发比点击实际控制其它方式的“打开文件”对话框可以从在任何时候安全原因的浏览器中移除。（我认为在当前版本的 FF 和 IE 中，不可能再以编程方式触发该事件。）
回答by SystemDZ
This is my method if i got your point
如果我明白你的意思，这就是我的方法
HTML
HTML
<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
回答by Zicsus
its really simple you can try this:
它真的很简单，你可以试试这个：
$("#image id").click(function(){
$("#input id").click();
});
回答by Neocortex
form input[type="file"] {
display: none;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
RUN SNIPPET 或者只是复制上面的代码并执行。你会得到你想要的。非常简单有效，无需 javascript。享受！！！
回答by ParPar
You can put an image instead, and do it like this:
你可以放一张图片，然后像这样：
HTML:
HTML：
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
查询：
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
注意：在 IE9 和 IE10 中，如果您通过 javascript 在文件输入中触发 onclick，表单将被标记为“危险”并且无法使用 javascript 提交，不确定是否可以传统提交。
回答by user3400389
Working Code:
工作代码：
just hide input part and do like this.
只需隐藏输入部分并这样做。
<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>
<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/>
</div>
回答by Petrunov
The input itself is hidden with CSS visibility:hidden.
输入本身是隐藏的，CSS 可见性：隐藏。
Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.
然后你可以拥有任何你想要的元素 - 锚点或图像..，当锚点/图像被点击时，触发对隐藏输入字段的点击 - 将出现用于选择文件的对话框。
EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
编辑：实际上它适用于 Chrome 和 Safari，我只是注意到在 FF4Beta 中情况并非如此
