Question

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

我尝试了其他方法here，here和here。所有浏览器都不兼容。

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

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

Answer 1

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

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

以下是完整的代码：

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>）。当最终用户点击该按钮时，她实际上会点击<input type="file" />。

Answer 2

使用“label”标签和“for”属性的简单方法。像这样http://jsfiddle.net/Txrs6/，但在这种情况下，我们看不到所选的文件。 CODE

<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`

<input style="display: none;" type="file" id="inputFile">

js http://jsfiddle.net/PZ5Ep/

的另一种方式

Answer 3

在这种情况下你最好的选择是使用flash上传器。这将引入一个完全独立的控件，并且不依赖于浏览器。网上有很多。这是一个：http://swfupload.org/

Answer 4

如果只是你要设置样式的上传按钮，为什么不能使用CSS？这应该适用于所有浏览器。

如果你把你的代码放在jsFiddle上，我可以告诉你更多关于你能做什么的事。

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

4 个答案: