input type = file仅显示按钮

有没有办法将样式(或脚本)元素只显示"浏览"按钮而没有文本字段？

谢谢

编辑:只是为了澄清为什么我需要这个.我正在使用来自http://www.morningz.com/?p=5的多文件上传代码,它不需要输入文本字段,因为它永远不会有价值.脚本只是将新选择的文件添加到页面上的集合中.如果可能的话,没有文本字段会更好看.

1> shiba..：

---

这肯定会在我的项目中使用它.我希望这有帮助:)

2> ampersandre..：

---

我有一点时间试图完成这个.我不想使用Flash解决方案,我所看到的jQuery库都不是所有浏览器都可靠的.

我提出了自己的解决方案,它完全在CSS中实现(除了onclick样式更改以使按钮显示为"clicked").

您可以在这里尝试一个工作示例: http ://jsfiddle.net/VQJ9V/307/(在FF 7,IE 9,Safari 5,Opera 11和Chrome 14中测试过)

它的工作原理是创建一个大文件输入(字体大小:50px),然后将其包装在一个具有固定大小和溢出:隐藏的div中.然后只能通过此"窗口"div看到输入.可以为div提供背景图像或颜色,可以添加文本,并且可以使输入透明以显示div背景:

HTML:

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

如果有任何问题请告诉我,我会尝试修复它们.

---

这是我遇到的最适合所有浏览器的解决方案

---

你是男人.我一直在努力解决这个问题,你的解决方案是唯一真正有效的解决方案,特别是通过使用"font-size"增加活动区域的更大按钮.谢谢!:)

---

优秀的一个没有使用任何脚本

3> tmanthey..：

---

我今天浪费了我的一天让这个工作.我发现这里没有任何解决方案适用于我的每个场景.

然后我记得我看到了一个没有文本框的JQuery文件上传示例.所以我所做的就是我拿出他们的榜样并将其剥离到相关部分.

此解决方案至少适用于IE和FF,可以完全设置样式.在下面的示例中,文件输入隐藏在花哨的"添加文件"按钮下.

    
    


    

        

            
                Add Files
                
            
        
    

---

重要的是,容器的溢出设置为隐藏.

---

如果我问原始问题,我应该有礼貌地将其标记为答案.谢谢.

4> 小智..：

---

隐藏input-file元素并创建一个可见按钮,该按钮将触发该输入文件的click事件.

试试这个:

CSS

#file { width:0; height:0; } 

HTML:

Upload

JAVASCRIPT(jQuery的):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

5> Suresh Pattu..：

---

使用css隐藏输入文件标签,添加标签并将其分配给输入按钮.标签将是可点击的,单击时,它将启动文件对话框.

 
Select file

将样式添加到标签作为按钮.
现场演示

6> Erik van Bra..：

---

那将是非常艰难的.文件输入类型的问题在于它通常由两个可视元素组成,同时被视为单个DOM元素.除此之外,几个浏览器对文件输入有各自独特的外观和感觉,而且你已经设定了噩梦.有关文件输入的怪癖,请参阅quirksmode.org上的这篇文章.我保证你不会让你开心(我从经验中说).

[编辑]

实际上,我认为您可能会将输入放在容器元素(如div)中,并为元素添加负边距.有效地将文本框部分隐藏在屏幕外.另一种选择是使用我链接的文章中的技术,尝试像按钮一样设置样式.

---

关于quirksmode的文章很棒.样式文件输入仍然很痛苦.:P

7> 小智..：

---

修复在所有浏览器中工作已解决:

我已经在FF,Chrome和IE中进行了测试 - 工作正常,也应用了样式:D

---

我很确定这对于许多浏览器都不起作用(包括FF和IE,当我上次测试时) - 我记得它唯一的浏览器是Chrome.

---

这*出现*工作(它会调出文件选择器菜单),但是在提交表单时,出于安全原因,文件不会在FireFox和IE中发送.

8> divyenduz..：

---

另一种简单的方法.在html中创建一个"输入类型文件"标记并隐藏它.然后单击一个按钮并根据需要对其进行格式化.在此之后使用javascript/jquery以单击按钮时以编程方式单击输入标记.

HTML: -

Add file

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

这是一个有效的JS小提琴: - http://jsfiddle.net/32na3/

---

这是一个很好的解决方案，但我无法在Chrome中使用它。显然其他人也不能。出于安全原因，Opera和Chrome不允许点击输入类型文件。在这里，您可以找到有关此内容的更多信息以及对我有用的解决方案：http://stackoverflow.com/a/3030174/2650732

9> nikotromus..：

---

我试图实施前两个解决方案,但最终却给我带来了巨大的浪费.最后,应用这个.css类解决了这个问题......

input[type='file'] {
  color: transparent;
}

完成!超级干净,超级简单......

10> GoreOle..：

---

我使用了上面推荐的一些代码,经过几个小时的磨练,我终于找到了一个免费的css包解决方案.

你可以在这里运行它 - http://jsfiddle.net/WqGph/

但随后找到了更好的解决方案 - http://jsfiddle.net/XMMc4/5/

 
       see jsfiddle code for examples

11> Zooza S..：

---

这是我的好办法:

Browse

至少它在Safari中有效.

干净利落.