输入类型 = 文件只显示按钮

小开

那会非常困难。文件输入类型的问题在于，它通常由两个可视元素组成，而被视为单个 DOM 元素。再加上一些浏览器对于文件输入有自己独特的外观和感觉，这就是噩梦。请参阅这个网站上的文章关于文件输入的怪癖。我保证这不会让你开心(这是我的经验之谈)。

[编辑]

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

小开

我有一个很蹩脚的解决方案。

<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>


<input id="File1" type="file" />

问题在于隐藏文本字段的宽度属性会因浏览器而异，因 Windows XP主题而异等等。也许你可以用它来工作？...

小开

用以下代码解决:

< div style = “ overflow: hide; width: 83px;”> < div style = “溢出: 隐藏; 宽度: 83px;”> < input style = ‘ float: right;’name = “ userfile”id = “ userfile”type = “ file”/>

小开

我的解决方案就是像“ druveen”说的那样把它设置在一个 div 中，然而我把我自己的按钮样式添加到 div 中(使它看起来像一个带有: hover 的按钮) ，我只是把样式“不透明度: 0;”设置为输入。对我有效，希望对你也有效。

小开

修正了在所有浏览器中的工作决心:

      <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

小开

我花了好长时间才完成这个任务。我不想使用 Flash 解决方案，而且没有一个 jQuery 库在所有浏览器中都是可靠的。

我想出了自己的解决方案，它完全用 CSS 实现(除了 onclick 样式更改使按钮显示为‘ click’)。

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

它的工作原理是创建一个大文件输入(字体大小: 50px) ，然后将其封装在一个有固定大小和溢出: hide 的 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)
}

如果有任何问题请告诉我，我会尽力解决。

小开

隐藏 input-file 元素并创建一个可见按钮，该按钮将触发该 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();}
);
});

小开

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

然后我想起来我看到了一个没有文本框的 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>

小开

<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;
});

小开

对我来说，最简单的方法是使用像背景色这样的字体颜色。简单，不优雅，但很有用。

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

小开

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

这将肯定工作，因为我已经在我的项目中使用它。

小开

所以这是做 所有浏览器:的最好方法

忘了 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);

小开

我知道这是一个老职位，但一个简单的方法，使文字消失只是设置文字颜色的背景。

如果你的文字输入背景是白色的，那么:

input[type="file"]{
color:#fff;
}

这不会影响“选择文件”文本，由于浏览器的原因，该文本仍然是黑色的。

小开

Tmanthey 的答案相当不错，只是在 Firefox v20中无法使用边框宽度。如果你看到链接(演示，在这里不能真正显示) ，他们解决了这个问题使用字体大小 = 23px，转换: 为 Firefox 翻译(- 300px，0px)缩放(4)得到按钮更大。

其他解决方案使用。点击()在不同的 div 是没有用的，如果你想使它成为一个拖放输入框。

小开

我使用了上面推荐的一些代码，经过几个小时的浪费我的时间，我最终得到了一个 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/>

小开

你可以给图像贴上标签，这样当你点击它的时候，按钮的点击事件就会被触发。你可以简单地使普通按钮不可见:

<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>

它适用于所有浏览器，并且非常容易使用。

小开

这里有几个有效的选择，但是我认为我会给出我所想到的，同时试图解决一个类似的问题。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);
}

小开

使用属性添加一个标签标记，将 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>

小开

这对我有用:

input[type="file"]  {
color: white!important;
}

小开

我只是设置了一个宽度为85px 的输入文件的样式，文本字段完全消失了

小开

另一个简单的方法。在 html 中创建一个“ input type file”标记并隐藏它。然后单击一个按钮并根据需要格式化它。在此之后，使用 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/

小开

您可以像下面这样分派隐藏文件输入上的 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>

小开

这是我最好的补救办法:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

至少在 Safari 里是有用的。

简单明了。

小开

我写道:

<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。

小开

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
<button  id="browse">Upload</button>

查询

 $(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});

希望这个有用:)

小开

下面是@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”单击触发器，以标准方式进行服务器回发。带有“ Upload File”的文本在包装器 div 溢出时将输入控件推出视图，因此不需要为“ File input”控件 div 应用任何样式。$([ id $= “ FileInput”])选择器允许应用标准 ASP.NET 前缀的 id 节。从 hdnFileName 后面的服务器代码设置的 FilePath 文本框值。一旦文件上传，值就会变为。

小开

我试图实施前两个解决方案，结果对我来说是一个巨大的时间浪费。最后，应用这个。Css 类解决了这个问题..。

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

搞定，超级干净，超级简单。

小开

此 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>

小开

您可以给输入元素一个字体不透明度为0。这将隐藏文本字段，而不会隐藏“选择文件”按钮。

不需要 javascript，清除跨浏览器远至 IE9

例如:

input {color: rgba(0, 0, 0, 0);}

小开

我不知道你在说什么，如果你试图把一个输入类型的文件样式化成一个按钮，这对我来说很容易，所有你需要的只是 HTML 和 CSS。

#File-Body>#File-For {
display: none;
}


#Filebutton {
width: 50px;
height: 20px;
border: 1px solid;
border-radius: 2px;
text-align: center;
}


#File-Body {
width: 300px;
height: 30px;
}

<div id="File-Body">
<label id="File-Lable" for="File-For">
<div id="Filebutton">Edit</div>
</label>
<input id="File-For" type="file">
</div>

如果你想测试它，这里是 http://jsfiddle.net/qm8j45c3/

小开

有一个简单的方法，只显示文件输入按钮，同时保持这个文件输入按钮的渲染和翻译:

使用颜色 透明的使文件输入后显示的文本不可见。

<input type="file" style="color: transparent" />