And*_*ija 146 html javascript css
有没有办法将样式(或脚本)<input type=file />元素只显示"浏览"按钮而没有文本字段？
谢谢
编辑:只是为了澄清为什么我需要这个.我正在使用来自http://www.morningz.com/?p=5的多文件上传代码,它不需要输入文本字段,因为它永远不会有价值.脚本只是将新选择的文件添加到页面上的集合中.如果可能的话,没有文本字段会更好看.
shi*_*iba 150
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
这肯定会在我的项目中使用它.我希望这有帮助:)
amp*_*dre 80
我有一点时间试图完成这个.我不想使用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:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
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)
}
如果有任何问题请告诉我,我会尝试修复它们.
tma*_*hey 52
我今天浪费了我的一天让这个工作.我发现这里没有任何解决方案适用于我的每个场景.
然后我记得我看到了一个没有文本框的JQuery文件上传示例.所以我所做的就是我拿出他们的榜样并将其剥离到相关部分.
此解决方案至少适用于IE和FF,可以完全设置样式.在下面的示例中,文件输入隐藏在花哨的"添加文件"按钮下.
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>
小智 25
隐藏input-file元素并创建一个可见按钮,该按钮将触发该输入文件的click事件.
试试这个:
CSS
#file { width:0; height:0; }
HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>
JAVASCRIPT(jQuery的):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});
Sur*_*ttu 17
使用css隐藏输入文件标签,添加标签并将其分配给输入按钮.标签将是可点击的,单击时,它将启动文件对话框.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>
将样式添加到标签作为按钮.
现场演示
Eri*_*kel 15
那将是非常艰难的.文件输入类型的问题在于它通常由两个可视元素组成,同时被视为单个DOM元素.除此之外,几个浏览器对文件输入有各自独特的外观和感觉,而且你已经设定了噩梦.有关文件输入的怪癖,请参阅quirksmode.org上的这篇文章.我保证你不会让你开心(我从经验中说).
[编辑]
实际上,我认为您可能会将输入放在容器元素(如div)中,并为元素添加负边距.有效地将文本框部分隐藏在屏幕外.另一种选择是使用我链接的文章中的技术,尝试像按钮一样设置样式.
小智 13
修复在所有浏览器中工作已解决:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>
我已经在FF,Chrome和IE中进行了测试 - 工作正常,也应用了样式:D
另一种简单的方法.在html中创建一个"输入类型文件"标记并隐藏它.然后单击一个按钮并根据需要对其进行格式化.在此之后使用javascript/jquery以单击按钮时以编程方式单击输入标记.
HTML: -
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>
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/
我试图实施前两个解决方案,但最终却给我带来了巨大的浪费.最后,应用这个.css类解决了这个问题......
input[type='file'] {
color: transparent;
}
完成!超级干净,超级简单......
我使用了上面推荐的一些代码,经过几个小时的磨练,我终于找到了一个免费的css包解决方案.
你可以在这里运行它 - http://jsfiddle.net/WqGph/
但随后找到了更好的解决方案 - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>
这是我的好办法:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
至少它在Safari中有效.
干净利落.