有没有一种样式（或脚本） <input type=file />元素以使其仅显示“浏览”按钮而没有文本字段？
谢谢
编辑：只是为了澄清为什么我需要这个。我正在使用来自http://www.morningz.com/?p=5的多文件上传代码，它不需要输入文本字段，因为它永远没有价值。脚本只是将新选择的文件添加到页面上的集合中。如果可能的话，没有文本字段看起来会更好。
有没有一种样式（或脚本） <input type=file />元素以使其仅显示“浏览”按钮而没有文本字段？
谢谢
编辑：只是为了澄清为什么我需要这个。我正在使用来自http://www.morningz.com/?p=5的多文件上传代码，它不需要输入文本字段，因为它永远没有价值。脚本只是将新选择的文件添加到页面上的集合中。如果可能的话，没有文本字段看起来会更好。
Answers:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />我在我的项目中使用过它肯定会起作用。我希望这会有所帮助:)
我花了很长时间试图做到这一点。我不想使用Flash解决方案，并且我看过的jQuery库在所有浏览器中都不可靠。
我想出了自己的解决方案，该解决方案完全在CSS中实现（除了onclick样式更改，使按钮显示为“ clicked”）。
您可以在此处尝试一个有效的示例： http : //jsfiddle.net/VQJ9V/307/（在FF 7，IE 9，Safari 5，Opera 11和Chrome 14中测试）
它的工作方式是创建一个大文件输入（字体大小：50像素），然后将其包装在具有固定大小和overflow：hidden的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)
}如果有任何问题，请告诉我，我将尝试解决。
我今天浪费我的时间让它工作。我发现这里没有一种解决方案适用于每种情况。
然后我想起了我看到的一个不带文本框的JQuery File Upload的示例。所以我要做的是，以他们的榜样为例，并将其简化为相关部分。
此解决方案至少适用于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>隐藏输入文件元素并创建一个可见按钮，该按钮将触发该输入文件的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();}
);
});使用CSS隐藏输入文件标签，添加标签并将其分配给输入按钮。标签将是可单击的，并且在单击时将打开文件对话框。
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>将样式作为按钮添加到标签。
现场演示
onchange处理程序，input以允许一些JS代码提取上传的文件信息。
这将非常困难。文件输入类型的问题在于，它通常由两个可视元素组成，同时被视为单个DOM元素。此外，几种浏览器对于文件输入都有自己独特的外观，因此您将陷入噩梦。请参阅quirksmode.org上的有关文件输入具有的怪癖的文章。我保证你不会让你开心（我从经验上讲）。
[编辑]
实际上，我认为您可能不愿意将输入内容放入容器元素（如div）中，并向该元素添加负边距。有效地将文本框部分隐藏在屏幕之外。另一种选择是使用我链接的文章中的技术，尝试将其样式化为按钮。
已修复，可在所有浏览器中工作：
<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袋的解决方案。
您可以在这里运行它-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/>onchange隐藏input元素未触发事件。
您可以像这样在隐藏文件输入上调度click事件：
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); 将HTMLEvents更改为MouseEventsvar ev = document.createEvent('MouseEvents');
我有一个非常hacky的解决方案...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />问题在于隐藏文本字段的width属性在浏览器之间会明显变化，在Windows XP主题之间也会变化等等。也许它可以与您合作吗？...
我知道这是一篇过时的文章，但是使文字消失的一种简单方法就是将文字颜色设置为背景的颜色。
例如，如果您的文本输入背景为白色，则：
input[type="file"]{
color:#fff;
}这不会影响“选择文件”文本，由于浏览器的影响，该文本仍为黑色。
我刚刚设置了一个宽度为85px的输入文件，并且文本字段完全消失了
此HTML代码仅显示“上传文件”按钮
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form>对我来说，最简单的方法是使用像背景颜色这样的字体颜色。简单，不优雅，但有用。
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>因此，这是针对所有浏览器的最佳方法：
忘记CSS！
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>所有这些答案都很可爱，但是CSS在所有浏览器和设备上都不一样，因此无法使用，我写的第一个答案将在Safari之外的所有版本上起作用。为了使它能始终在所有浏览器中正常工作，必须动态创建它，并在每次要清除输入文本时都重新创建它：
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);tmanthey的答案很好，除了在Firefox v20中不能使用边框宽度。如果您看到链接（演示，不能在此处真正显示），他们使用font-size = 23px，transform：translate（-300px，0px）scale（4）解决了该问题，Firefox使按钮变大了。
如果要使其成为拖放输入框，则在不同的div上使用.click（）的其他解决方案是没有用的。
这里有几个有效的选项，但我想在尝试解决类似问题时会给出我的想法。 http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}我这样写：
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />在所有浏览器上都能正常工作，没有jQuery，没有CSS。
这是@ampsandre流行解决方案的简化版本，可在所有主要浏览器中使用。ASP.NET标记
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />jQuery代码
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});CSS代码
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}使用隐藏的“ UploadButton”点击触发器进行标准的服务器回发。带有“上传文件”文本的文本在溢出时将输入控件推入包装div中，因此无需为“文件输入”控件div应用任何样式。$（[id $ =“ FileInput”]）选择器允许使用标准ASP.NET前缀的ID部分。文件上传后，从hdnFileName.Value后面的服务器代码中设置的FilePath文本框值。