像很多人一样，我想定制丑陋的input type=file，而且我知道如果没有一些技巧和/或javascript，这是无法做到的。但是，在我的情况下，上传文件按钮仅用于上传图片 (jpeg|jpg|png|gif)，所以我想知道是否可以使用“clickable”图片这将完全充当输入类型文件（显示对话框，并在提交的页面上显示相同的 $_FILE）。
我也找到了一些解决方法 here 和 this interesting one（但不适用于 Chrome =/）。
当您想为文件按钮添加一些样式时，你们会怎么做？如果您对此有任何看法，请点击回答按钮；）
【问题讨论】：
标签： css image file button input
【讨论】：
其实可以用纯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（这样您就可以看到自己在做什么！）
确保跨浏览器进行测试，因为它们都会使输入按钮的大小略有不同。
【讨论】：
输入本身通过 CSS 可见性隐藏：隐藏。
然后你可以拥有任何你想要的元素 - 锚点或图像..，当单击锚点/图像时，触发对隐藏输入字段的单击 - 将出现选择文件的对话框。
编辑：实际上它适用于 Chrome 和 Safari，我只是注意到在 FF4Beta 中不是这样
【讨论】：
这对我来说非常有效：
.image-upload>input {
display: none;
}<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>基本上标签的for属性使得点击标签与点击指定的输入是一样的。
此外，将 display 属性设置为 none 使得文件输入根本不呈现，将其隐藏得很好且干净。
在 Chrome 中测试，但根据网络应该适用于所有主要浏览器。 :)
编辑： 在此处添加 JSFiddle：https://jsfiddle.net/c5s42vdz/
【讨论】：
你可以放一张图片，像这样：
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');
});
警告： 在 IE9 和 IE10 中，如果您通过 javascript 在文件输入中触发 onclick，则表单会被标记为“危险”并且无法使用 javascript 提交，不确定是否可以传统方式提交。
【讨论】：
工作代码：
只需隐藏输入部分并这样做。
<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>
【讨论】：
如果我明白你的意思，这是我的方法
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
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
【讨论】：
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。享受！！！
【讨论】：
真的很简单，你可以试试这个：
$("#image id").click(function(){
$("#input id").click();
});
【讨论】：
@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 问题，并在img 标记中添加了pointer-events: none 以使其在输入文件类型标记在FORM 标记中时工作。
似乎在所有主流浏览器中都适合我。
希望它可以帮助某人。
【讨论】：
在过去十年中，我遇到了很多隐藏和不可见输入的问题，有时事情比我们想象的要简单得多。
我有点希望 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 中唯一的问题是它不支持自动边距。
运行 sn -p 只需复制和粘贴 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>【讨论】：
比写 JS 更好的方法是使用原生， 它变得比建议的要轻：
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
这样label 会自动连接到隐藏的输入。
点击标签就像点击字段一样。
【讨论】：
您可以用新选择的图像自动替换图像。
<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>
【讨论】：
<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};
document.getElementById("par_form").appendChild(fileSelector);
}
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>
【讨论】：