输入类型=文件仅显示按钮
Posted
技术标签:
【中文标题】输入类型=文件仅显示按钮【英文标题】：input type=file show only button 【发布时间】：2010-11-08 06:25:25 【问题描述】：有没有办法设置（或脚本）<input type=file /> 元素的样式，使其只有可见的“浏览”按钮而没有文本字段？
谢谢
编辑： 只是为了澄清为什么我需要这个。我正在使用来自http://www.morningz.com/?p=5 的多文件上传代码，它不需要输入文本字段，因为它从来没有价值。脚本只是将新选择的文件添加到页面上的集合中。如果可能的话，没有文本字段会更好看。
【问题讨论】：
【参考方案1】：这将是非常困难的。文件输入类型的问题在于它通常由两个可视元素组成，同时被视为单个 DOM 元素。再加上几个浏览器对文件输入有自己独特的外观和感觉，你已经准备好做噩梦了。请参阅此 article on quirksmode.org 关于文件输入的怪癖。我向你保证这不会让你快乐（我是根据经验说话）。
[编辑]
实际上，我认为您可以将输入放入容器元素（如 div）中，并为元素添加负边距。有效地将文本框部分隐藏在屏幕之外。 另一种选择是使用我链接的文章中的技术，尝试将其设置为按钮。
【讨论】：
关于 quirksmode 的那篇文章很棒。不过，样式文件输入仍然很痛苦。 :P joebert：我同意，我认为最好的选择仍然是 quirksmode 文章中展示的技术，多么痛苦的 hackish...【参考方案2】：我有一个非常hacky的解决方案......
<style type="text/css">
input[type="file"]
width: 80px;
</style>
<input id="File1" type="file" />
问题是隐藏文本字段的宽度属性在浏览器之间明显不同，在 Windows XP 主题之间也不同等等。也许你可以使用它？...
【讨论】：
即使这个也不能在 IE6 上运行，浏览器也不理解属性选择器。【参考方案3】：用以下代码解决：
<div style="overflow: hidden;width:83px;">
<input style='float:right;' name="userfile" id="userfile" type="file"/>
</div>
【讨论】：
【参考方案4】：我的解决方案只是将它设置在像“druveen”所说的 div 中，但是我将自己的按钮样式添加到 div（使其看起来像一个带有：悬停的按钮）并且我只是设置样式“不透明度： 0;"到输入。对我很有魅力，希望对你也一样。
【讨论】：
【参考方案5】：修复以在所有浏览器中工作 已解决：
<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
【讨论】：
我很确定这不适用于所有浏览器（包括 FF 和 IE，当我上次测试时）——我记得它唯一可以使用的浏览器是 Chrome。 这只适用于 jQuery，但它不是一个独立的解决方案。 这个似乎可以工作（它会打开文件选择器菜单），但是当提交表单时，出于安全原因，文件不会在 FireFox 和 IE 中发送。 【参考方案6】：我花了很长时间试图完成这个。我不想使用 Flash 解决方案，而且我查看的 jQuery 库在所有浏览器中都不可靠。
我想出了自己的解决方案，它完全在 CSS 中实现（除了 onclick 样式更改以使按钮显示为“点击”）。
您可以在这里尝试一个工作示例： 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)
如果有任何问题，请告诉我，我会尽力解决。
【讨论】：
这是我遇到的适用于所有浏览器的最佳解决方案 你就是那个男人。我一直在努力解决 FF 上的这个问题，而您的解决方案是唯一真正有效的解决方案，特别是通过使用“字体大小”增加其活动区域来使用更大的按钮。谢谢！ :) 不使用任何脚本的优秀作品 Twitter 做到了，但与这个相比有点复杂。对我来说工作得很好！ 很好的解决方案！只有一个问题：为什么不给 .fileInput 设置 100% 的宽度并将 .inputWrapper 的宽度设置为 auto？【参考方案7】：隐藏输入文件元素并创建一个可见按钮，该按钮将触发该输入文件的点击事件。
试试这个：
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();
);
);
【讨论】：
我制作了一个 jQuery 插件，可以为您完成所有工作：github.com/mbitto/jquery.buttonFile 这在较新版本的 IE 中不起作用。间接点击会导致 IE 跳出并拒绝访问。这很烦人。【参考方案8】：我今天浪费了一天的时间来解决这个问题。我发现这里没有一个解决方案适用于我的每个场景。
然后我记得我看到了一个没有文本框的example for the 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>
【讨论】：
重要的是容器的溢出设置为隐藏。 这至少在 IE 和 Chrome 中对我有用。谢谢:) 边框宽度：0 0 100px 200px;在 IE 和 Chrome 中也为我工作。谢谢。 如果我问了最初的问题，我会礼貌地将其标记为答案。谢谢。 下面是更好的答案。使用标签，隐藏输入。效果很好！【参考方案9】：<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function()
$().trigger('click');
return false;
);
【讨论】：
【参考方案10】：对我来说，最简单的方法是使用像背景颜色这样的字体颜色。简单，不优雅，但很有用。
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>
【讨论】：
【参考方案11】：<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
这肯定会奏效，我已经在我的项目中使用过它。我希望这会有所帮助:)
【讨论】：
这个答案非常简单优雅，适用于所有浏览器。 这是迄今为止我找到的最佳解决方案。它消除了不同移动浏览器的一些真正古怪的文件输入样式行为。现在，我的文件输入控件在我的其余布局中并没有像大拇指一样突出。非常感谢，希望我能投票超过 1 个。 ... 并添加 onchange="this.form.submit();"输入文件元素以在文件选择后开始上传。不要忘记用 Form 标签包裹所有元素。 这在 IE8 及以下版本中不起作用，因为在提交表单时您会收到拒绝访问错误（出于“安全原因”，您无法在 IE8 及以下版本中使用 js 触发文件输入） @unmotiveicuser 正确，并且出于同样的安全原因无法在 ipad 中使用。 :)【参考方案12】：所以这是最好的方法所有浏览器：
忘记 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>
【讨论】：
这在 SAFARI 中不起作用...因为出于安全原因它不允许 .trigger('click') :?为了让它在 safari 中工作，动态创建文件按钮并在再次加载时重新添加它【参考方案13】：所有这些答案都很可爱，但 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);
【讨论】：
【参考方案14】：我知道这是一篇旧帖子，但让文字消失的简单方法就是将文字颜色设置为背景颜色。
例如，如果您的文本输入背景为白色，则：
input[type="file"]
color:#fff;
这不会影响选择文件文本，由于浏览器，该文本仍然是黑色的。
【讨论】：
如果用户点击该部分，则会打开上传弹出窗口。【参考方案15】：tmanthey 的回答还不错，只是在 Firefox v20 中不能玩border-width。如果您看到link（演示，无法在此处真正显示），他们使用 font-size=23px, transform:translate(-300px, 0px) scale(4) 为 Firefox 解决了问题，以使按钮变大。 如果您想让它成为拖放输入框，则在不同的 div 上使用 .click() 的其他解决方案是无用的。
【讨论】：
【参考方案16】：我使用了上面推荐的一些代码，经过数小时的精打细算，我最终找到了一个无 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元素没有触发onchange事件。【参考方案17】：
您可以标记图像，这样当您单击它时，将触发按钮的单击事件。您可以简单地使普通按钮不可见：
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>
它适用于所有浏览器，并且非常易于使用。
【讨论】：
【参考方案18】：这里有几个有效的选项，但我想我会在尝试解决类似问题时给出我的想法。 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);
【讨论】：
【参考方案19】：添加带有for attribute的标签标签，将for属性值分配给文件输入按钮。 现在，当您单击标签时，浏览器会自动打开文件浏览对话框。注意：使用 CSS 隐藏文件输入按钮。 查看下面的现场演示。
$('#imageUpload').change(function()
readImgUrlAndPreview(this);
function readImgUrlAndPreview(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function(e)
$('#imagePreview').removeClass('hide').attr('src', e.target.result);
;
reader.readAsDataURL(input.files[0]);
);.hide
display: none;
.btn
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ddd;
box-shadow: 2px 2px 10px #eee;
border-radius: 4px;
.btn-large
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
#imagePreview
margin: 15px 0 0 0;
border: 2px solid #ddd;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div clas="file_input_wrap">
<input type="file" name="imageUpload" id="imageUpload" class="hide" />
<label for="imageUpload" class="btn btn-large">Select file</label>
</div>
<div class="img_preview_wrap">
<img src="" id="imagePreview" class="hide" />
</div>【讨论】：
这可能是最简单最好的答案。我还会在input 中添加一个onchange 处理程序，以允许一些JS 代码获取上传的文件信息。
工作得很好，在 React 中也是如此。【参考方案20】：
这对我有用：
input[type="file"]
color: white!important;
【讨论】：
【参考方案21】：我刚刚设置了一个宽度为 85px 的输入文件，文本字段完全消失了
【讨论】：
那么文本字段是否消失了？ “at all”可能意味着否定，但你的语法有缺陷（因此模棱两可）。【参考方案22】：另一种简单的方法。在 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/
【讨论】：
这是一个很好的解决方案，但我无法让它在 Chrome 中工作。显然其他人也做不到。出于安全原因，Opera 和 Chrome 不允许点击输入类型文件。在这里你可以找到更多关于这个和对我有用的解决方案：***.com/a/3030174/2650732 回到我写这个答案的时候，它在 chrome 上工作。感谢您让我知道，我会相应地更新我的答案【参考方案23】：您可以像这样在隐藏文件输入上分派点击事件：
<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 更改为 MouseEvents var ev = document.createEvent('MouseEvents');
很好，谢谢！我将您的帖子转换为可运行的代码 sn-p 并将 HtmlEvents 更改为 MouseEvents【参考方案24】：
这是我的良方：
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
至少它在 Safari 中有效。
简单明了。
【讨论】：
【参考方案25】：这是我写的：
<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。
【讨论】：
【参考方案26】：HTML：
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>
JQUERY
$(document).ready(function()
$("#browse").click(function()
$("#upload").click();
);
);
希望这可行:)
【讨论】：
【参考方案27】：这是@ampersandre 流行解决方案的简化版本，适用于所有主要浏览器。 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 文本框值。
【讨论】：
【参考方案28】：我尝试实施前两种解决方案，但最终对我来说是一种巨大的时间浪费。最后，应用这个 .css 类解决了问题...
input[type='file']
color: transparent;
完成！超级干净超级简单……
【讨论】：
这个方法很棒！【参考方案29】：此 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>
【讨论】：
请考虑在您的答案中添加一些上下文信息，以描述您的代码 sn-p 的作用。【参考方案30】：您可以将输入元素的字体不透明度设置为 0。这将隐藏文本字段而不隐藏“选择文件”按钮。
无需 javascript，早至 IE 9 即可清除跨浏览器
例如，
input color: rgba(0, 0, 0, 0);
【讨论】：
以上是关于输入类型=文件仅显示按钮的主要内容，如果未能解决你的问题，请参考以下文章