有没有办法设置样式（或脚本）<input type=file />元素，使其仅在没有文本字段的情况下显示“浏览”按钮？
谢谢
编辑：只是为了澄清为什么我需要这个。我正在使用来自http://www.morningz.com/?p=5 的多文件上传代码，它不需要输入文本字段，因为它永远没有value。脚本只是将新选择的文件添加到页面上的集合中。如果可能的话，没有文本字段会更好看。
输入类型=文件只显示按钮
IT技术
javascript
html
css
2021-01-22 20:42:20
6个回答
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
这肯定会起作用，我在我的项目中使用过它。我希望这会有所帮助:)
我花了很长时间试图完成这个。我不想使用 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)
}
如果有任何问题，请告诉我，我会尝试修复它们。
我今天浪费了我的一天来让它工作。我发现这里没有任何解决方案适用于我的每个场景。
然后我记得我看到了一个没有文本框的 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>
添加带有for 属性的 label 标签，将 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" alt="Preview Image" width="200px" class="hide" />
</div>隐藏输入文件元素并创建一个可见按钮，该按钮将触发该输入文件的点击事件。
试试这个：
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();}
);
});