我和同事正在开发一个网络应用程序，供我们的客户登录并管理那里的详细信息。其中一个部分要求用户上传公司 Logo ，但众所周知，html 浏览器按钮或标签很难设置样式。这就是我想要的样子:
但现实情况是，如果我在其中放置一个普通的旧文件标签，它看起来会平淡无奇、通用且不合适，所以我在谷歌上搜索了解决方案，经过一番搜索后，我遇到了这段代码，它产生了下面的图像代码(我还显示了不透明度设置为零的文件上传):
#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}
#filepc
{
margin-top: 12px;
}
#fakeinputfile
{
margin-top:-28px;
}
#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}
<body>
<br />
<div id="divinputfile">
<div id="fakeinputfile">
<br />
<input name="fakefilepc" type="text" id="fakefilepc" />
</div>
<div align="right">
<input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/>
</div>
</div>
</body>
这是一个基本的 hack，当我选择样式按钮时，我实际上选择了不可见的上传按钮，然后上传的值被传递到上面的测试框中，看起来像是上传的真正部分。这种方法有两个问题，我希望你能在这里帮助我
a) 只有按钮可以点击上传。在大多数浏览器(不包括 Chrome)中，您可以点击文本框和按钮来上传图片。当然，使用此方法，文件路径的文本将添加到文本框中，但对该框的任何更改都不会更改文件，例如:如果您选择要上传的 file1.jpg 但您确实想要 file2.jpg，请更改文本框中的文件路径不会改变实际上传元素的东西
b) Chrome 和 Opera 等一些浏览器将\fakepath\文件路径添加到文本框，这很丑陋，因此任何可以去除它的 if 语句也将非常有用。
希望你们能帮助我解决这个问题，如果不是通过代码提示，那么如果有人知道一个好的 JavaScript 插件可以节省时间。
谢谢
最佳答案
您已经为文本框设置了 javascript，以便在更改时显示新的文件路径值。 这就是您还必须删除任何/fakepath/部分等的地方。
您还可以将点击事件添加到文本框，这将激活文件浏览点击事件。
我可以立即告诉你这对于 jQuery 来说相当容易，但我不知道如何使用普通 JS 来做到这一点。
/e: 事实上，似乎无法触发文件输入操作。见相关问题 In JavaScript can I make a "click" event fire programmatically for a file input element?
关于javascript - 使用 CSS 样式和上传按钮的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4404697/