所有浏览器的文件输入按钮，这可能吗？ [英] A file input button for all browsers, is this possible?

问题描述

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

我尝试了其他方法这里，此处和此处。所有的浏览器都不兼容。

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

我想让我的文件输入按钮在所有浏览器中看起来一致。

解决方案

我不记得技术的来源，但这个似乎是跨浏览器的。测试：

• Google Chrome 9


• FireFox 3.6
  
• Internet Explorer 6-9


• Opera 10


• Safari for Windows
  

以下是完整的代码：

HTML：

---

 < div> 
<按钮><！ - 这是skinnable  - >挑选档案...< / button> 
< input type =file/> 
< / div> 
  

CSS：

---

  div 
 {
 position：relative; 
 width：100px; 
 height：30px; 
 overflow：hidden; 
} 
 
 div按钮
 {
 position：absolute; 
宽度：100％; 
身高：100％; 
} 
 
 div输入
 {
字体：500px monospace; / *使输入按钮巨大* / 
不透明度：0; / *这会使它透明* / 
 filter：alpha（opacity = 0）; / * Internet Explorer的透明度* / 
 position：absolute; / *使之与z-index绝对：1将它放在按钮的顶部* / 
 z-index：1; 
 top：0; 
 right：0; 
 padding：0; 
保证金：0; 
} 
  

这个想法是让< input type =file/> 透明，并将其置于某些可移植样式的内容之上（在这种情况下，为<按钮> ）。当最终用户点击按钮时，她会实际点击< input type =file/> 。

Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.

I have tried other approaches here, here and here. All are not compatible with all browsers.

What else can I use / do to have my file input element as an image?

I would like to have my file input button to look consistent in all browsers.

解决方案

I can't remember the source of the technique but this seems to be cross-browser. Tested in:

• Google Chrome 9
• FireFox 3.6
• Internet Explorer 6-9
• Opera 10
• Safari for Windows

Here is the complete code:

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;
}

The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.

这篇关于所有浏览器的文件输入按钮，这可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！