和很多人一样，我想定制丑陋的input type=file，我知道如果没有一些黑客和/或javascript就无法做到。但是，在我的情况下，上传文件按钮仅用于上传图像（ jpeg | jpg | png | gif ），所以我想知道我是否可以使用“clickable “将完全作为输入类型文件的图像（显示对话框，并在提交的页面上显示相同的$ _FILE）
我发现了一些解决方法here和this interesting one（但不适用于Chrome = /）。
当你想为文件按钮添加一些样式时，你们做了什么？如果您对此有任何观点，只需点击答案按钮;）
答案 0 :(得分：227)
这对我来说非常有用：
.image-upload>input {
display: none;
}<div class="image-upload">
<label for="file-input">
<img src="placeholder.jpg"/>
</label>
<input id="file-input" type="file" />
</div>
基本上，标签的 属性使得点击标签与点击指定的输入相同。
此外，display属性设置为none使得文件输入根本不会被渲染，使其隐藏得很干净。
在Chrome中测试但根据网络应该适用于所有主流浏览器。 ：）
修改 在这里添加了JSFiddle：https://jsfiddle.net/c5s42vdz/
答案 1 :(得分：61)
实际上它可以在纯CSS中完成，而且很容易......
HTML代码
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
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;
}
我们的想法是将输入绝对放在标签内。将输入的字体大小设置为大的，这将增加“浏览”按钮的大小。然后使用负左/顶部属性进行一些试验和错误，将输入浏览按钮定位在标签后面。
定位按钮时，将alpha设置为1.完成后将其设置为0（这样你就可以看到你在做什么了！）
确保您在浏览器之间进行测试，因为它们都会使输入按钮的大小略有不同。
您可以在此处查看示例（添加曲目按钮）：http://rakmastering.com/upload/
答案 2 :(得分：12)
@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>
我使用visibility: hidden, width:0而不是display: none来解决Safari问题，并在pointer-events: none标记中添加了img，以便在输入文件类型标记位于FORM标记中时使其正常工作。
似乎在所有主流浏览器中为我工作。
希望它有所帮助。
答案 3 :(得分：4)
我会使用SWFUpload或Uploadify。他们需要Flash，但你可以毫无困难地做你想做的一切。
除了单击实际控件之外，任何尝试触发“打开文件”对话框的基于<input type="file">的解决方法都可以出于安全原因随时从浏览器中删除。 （我认为在当前版本的FF和IE中，不可能以编程方式触发该事件。）
答案 4 :(得分：4)
如果我明白了，这是我的方法
<强>
<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>
<强>
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
答案 5 :(得分：2)
非常简单，你可以试试这个：
$("#image id").click(function(){
$("#input id").click();
});
答案 6 :(得分：2)
在过去的十年中，我遇到了很多隐藏和不可见输入的问题，有时候事情比我们想象的要简单。
我对IE 5、6、7、8和9表示不支持不透明度，因此文件输入将覆盖上载图像，但是以下CSS代码已解决了该问题。
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
以下内容已在chrome，IE 5、6、7、8、9、10上进行了测试，而IE 5中唯一的问题是它不支持自动页边距。
运行该代码段只需复制并粘贴CSS，然后根据需要修改HTML大小。
.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
答案 7 :(得分：2)
比编写JS更好的方法是使用本机， 并且变得比建议的要轻：
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
通过这种方式，label自动连接到隐藏的输入。
单击标签就像单击字段一样。
答案 8 :(得分：1)
您可以改为放置图片，并按照以下方式进行操作：
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 ： 在IE9和IE10中，如果您通过javascript触发文件输入中的onclick，表单会被标记为“危险”并且无法使用javascript进行下限，不确定是否可以提交传统。
答案 9 :(得分：1)
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>
运行SNIPPET或只需复制上面的代码并执行即可。你会得到你想要的。非常简单有效，没有javascript。享受!!!
答案 10 :(得分：0)
输入本身隐藏了CSS可见性：隐藏。
然后你可以拥有你想要的任何元素 - 锚点或图像..当点击锚点/图像时，触发点击隐藏的输入字段 - 将出现用于选择文件的对话框。
编辑：实际上它适用于Chrome和Safari，我只是注意到FF4Beta不是这样的答案 11 :(得分：0)
工作代码：
只需隐藏输入部分即可。
<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>
答案 12 :(得分：0)
您可以使用新选择的图像自动替换图像。
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>