所有浏览器的文件输入按钮都可以吗？

Question

是否可以使用uploadify允许任何用户从文件对话框中选择文件并将其插入到表单的文件输入元素中？我只需要使用uploadify作为将"上传按钮"设置为图像的方式.

我曾尝试其他方法在这里,这里和这里.所有浏览器都不兼容.

我还可以使用/做什么来将文件输入元素作为图像？

我希望我的文件输入按钮在所有浏览器中看起来都一致.

Answer 1

我不记得该技术的来源,但这个似乎是跨浏览器.测试中:

• 谷歌Chrome 9
• FireFox 3.6
• Internet Explorer 6-9
• 歌剧10
• 适用于Windows的Safari

这是完整的代码:

HTML:

<div>
    <button><!-- this is skinnable -->Pick a file ...</button>
    <input type="file" />
</div>

CSS:

div
{
    position:relative;
    width: 100px;
    height: 30px;
    overflow:hidden;
}

div button
{
    position: absolute;
    width: 100%;
    height: 100%;
}

div input
{
    font: 500px monospace; /* make the input's button HUGE */
    opacity:0; /* this will make it transparent */
    filter: alpha(opacity=0); /* transparency for Internet Explorer */
    position: absolute;  /* making it absolute with z-index:1 will place it on top of the button */
    z-index: 1;
    top:0;
    right:0;
    padding:0;
    margin: 0;
}

我们的想法是使<input type="file" />透明化并将其放在一些可以样式化的内容之上(<button>在本例中为a).当最终用户点击按钮时,她实际上会点击<input type="file" />.