input type = file仅显示按钮

时间：2009-07-05 22:07:19

标签： javascript html css

有没有办法让样式（或脚本）<input type=file />元素只显示“浏览”按钮而没有文本字段？

由于

修改： 只是为了澄清为什么我需要这个。我正在使用来自http://www.morningz.com/?p=5的多文件上传代码，它不需要输入文本字段，因为它永远不会有价值。脚本只是将新选择的文件添加到页面上的集合中。如果可能的话，没有文本字段会更好看。

32 个答案:

答案 0 :(得分：145)

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

这肯定会在我的项目中使用它。我希望这会有所帮助：）

答案 1 :(得分：79)

我有一段时间试图做到这一点。我不想使用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)
}

如果有任何问题，请告诉我，我会尝试修复它们。

答案 2 :(得分：51)

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

然后我记得我看到一个没有文字框的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>

答案 3 :(得分：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();}
    );
});

答案 4 :(得分：17)

用css隐藏输入文件标签，添加标签并将其分配给输入按钮。标签将是可点击的，点击后，它将启动文件对话框。

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

将样式添加到标签中作为按钮 的 Live Demo

答案 5 :(得分：15)

这将非常困难。文件输入类型的问题在于它通常由两个可视元素组成，同时被视为单个DOM元素。除此之外，几个浏览器对文件输入有各自独特的外观和感觉，而且你已经设定了噩梦。有关文件输入的怪癖，请参阅此article on quirksmode.org。我保证你不会让你开心（我从经验中说出来）。

[编辑]

实际上，我认为您可能会将输入放在容器元素（如div）中，并为元素添加负边距。有效地将文本框部分隐藏在屏幕外。 另一种选择是使用我链接的文章中的技术，尝试将其设置为按钮样式。

答案 6 :(得分：12)

修复可在所有浏览器中使用 解决：

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

我在FF，Chrome＆amp; IE - 工作正常，应用样式：D

答案 7 :(得分：8)

我试图实施前两个解决方案，但最终却给我带来了巨大的浪费。最后，应用这个.css类解决了这个问题... 

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

完成！超级干净，超级简单...

答案 8 :(得分：8)

另一种简单的方法。制作一个＆＃34;输入类型文件＆＃34;在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/

答案 9 :(得分：7)

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

答案 10 :(得分：6)

这是我的好办法：

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

至少它在Safari中有效。

简单明了。

答案 11 :(得分：4)

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

希望这有效：）

答案 12 :(得分：4)

您可以标记图像，以便在单击图像时触发按钮的单击事件。您可以简单地使普通按钮不可见：

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

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

答案 13 :(得分：3)

我有一个真正的hacky解决方案...... 

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

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

问题是隐藏文本字段的width属性在浏览器之间会有很大不同，因此在Windows XP主题之间会有所不同等等。也许它可以与你合作吗？...

答案 14 :(得分：3)

这对我有用：

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

答案 15 :(得分：3)

我知道这是一篇旧帖子，但是让文字消失的一种简单方法就是将文字颜色设置为你背景的颜色。

例如，如果您的文字输入背景是白色，那么：

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

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

答案 16 :(得分：2)

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

答案 17 :(得分：2)

我只是设计了一个宽度为：85px的输入文件，文本字段全部消失了

答案 18 :(得分：2)

我的解决方案就是将其设置在像＃＆＃34; druveen＆＃34;说，但是我将我自己的按钮样式添加到div（使它看起来像一个带有a：hover的按钮），我只是设置样式＆＃34; opacity：0;＆＃34;对输入。为我带来魅力，希望它能为你做同样的事。

答案 19 :(得分：1)

有一种简单而笨拙的方法可以只显示文件输入按钮，同时保留此文件输入按钮的渲染和翻译：

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

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

答案 20 :(得分：1)

tmanthey的答案非常好，除了你不能在Firefox v20中使用border-width。如果您看到link（演示，无法真正显示在这里），他们使用font-size = 23px解决问题，转换：翻译（-300px，0px）缩放（4）以获得更大的按钮。

如果你想让它成为一个拖放输入框，在其他div上使用.click（）的其他解决方案是没用的。

答案 21 :(得分：1)

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

不需要javascript，最早可清除IE 9的跨浏览器

例如

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

答案 22 :(得分：1)

解决了以下代码：

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

答案 23 :(得分：1)

这是@ 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文本框值。

答案 24 :(得分：1)

我写了这个：

＆＃13;
＆＃13; 
<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();" />
＆＃13;
＆＃13;
＆＃13;

在所有浏览器中都可以正常工作，没有jQuery，没有CSS。

答案 25 :(得分：1)

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

答案 26 :(得分：1)

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

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

答案 27 :(得分：1)

所以这是最好的方法 FOR BROWSERS：

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

答案 28 :(得分：1)

所有这些答案都很可爱，但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);

答案 29 :(得分：1)

这里有几个有效的选项，但我想在尝试解决类似的问题时，我会给出我想出的内容。 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);  
}

答案 30 :(得分：0)

我将通过告诉您为什么不删除文本来回答这个问题。文本的原因是易用性。如果用户选择了文件，则他应该知道他已经选择了文件，并指出了文件名。尽管您可以删除许多人在此处答复的文本，但是这违反了人类用户的原则。删除文本后，无论用户是否选择了文件，该按钮都将显示为相同。这是糟糕的设计。

答案 31 :(得分：0)

我不知道您在说什么，如果您尝试将输入类型文件设置为对我来说很容易的按钮，那么您只需要html和CSS。

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

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

如果要测试，这里是http://jsfiddle.net/qm8j45c3/

相关问题
最新问题