用图像replaceinputtypes=文件
像很多人一样，我想自定义丑陋的inputtypes=文件，我知道不能没有一些黑客和/或JavaScript。 但是，在我的情况下，上传文件button仅用于上传图像（jpeg | jpg | png | gif），所以我想知道是否可以使用“clickable”图像，它将完全充当inputtypes文件（显示对话框，在提交的页面上显示相同的$ _FILE）。
我在这里find了一些解决方法，而且这个也很有趣 （但是在Chrome = /上不起作用）。
当你想添加一些风格到你的文件button，你们做什么？ 如果您有任何观点，只需点击答案button;）
这对我来说真的很好：
<div class="image-upload"> <label for="file-input"> <img src="placeholder.jpg"/> </label> <input id="file-input" type="file"/> </div> 造型：
.image-upload > input { display: none; }
基本上，标签的for属性使得点击标签与点击指定的input相同 。
此外，显示属性设置为none使得它的文件input不被渲染，隐藏它很好，干净。
在Chrome中testing，但根据networking应该在所有主stream浏览器上工作。 🙂
编辑：在这里添加JSFiddle： https : //jsfiddle.net/c5s42vdz/
其实它可以在纯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; }
这个想法是把input完全放在你的标签中。 将input的字体大小设置为很大，这将增加“浏览”button的大小。 然后使用负左/上属性进行试验和错误，将input浏览button放置在标签后面。
当定位button时，将alpha设置为1.当您完成设置后，将其设置回0（所以您可以看到你在做什么！）
确保你跨浏览器进行testing，因为它们都会使inputbutton的大小略有不同。
你可以在这里看到一个例子（Add Track button）： http : //rakmastering.com/upload/
我会使用SWFUpload或Uploadify 。 他们需要闪光灯，但没有任何烦恼，做你想要的一切。
基于安全原因，任何基于<input type="file">的解决方法都会尝试通过除点击实际控件之外的方式来触发“打开文件”对话框。 （我认为在当前版本的FF和IE中，不可能再以编程方式触发该事件。）
这是我的方法，如果我明白了你的观点
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>
很好的解决scheme@hardsetting，但我做了一些改进，使其与Windows（5.1.7）在Windows中的工作
.image-upload > input { visibility:hidden; width:0; height:0 }
<div class="image-upload"> <label for="file-input"> <img src="placeholder.jpg" style="pointer-events: none"/> </label> <input id="file-input" type="file" /> </div>
它真的很简单，你可以试试这个：
$("#image id").click(function(){ $("#input id").click(); });
你可以把图像，而是这样做：
HTML：
<img src="http://img.dovov.comuploadButton.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触发一个文件input中的onclick，那么表单会被标记为“危险的”，并且不能用javascript进行子化，不知道是否可以传统提交。
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>
input本身隐藏CSS隐藏：隐藏。
然后，你可以拥有任何你喜欢的元素 – 锚点或图像..，当锚/图像被点击时，触发点击隐藏的input字段 – select文件的对话框将出现。
编辑：其实它在Chrome和Safari的作品，我只是注意到，情况并非如此FF4Beta
工作代码：
只是隐藏input部分，这样做。
<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>
