代码之家 › 专栏 › 技术社区 › Andrija

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

css html javascript

137

Andrija · 技术社区 · 17 年前

有没有一种方法可以改变风格(或脚本) <input type=file /> 元素是否只有可见的“浏览”按钮而没有文本字段?

谢谢

: 只是想澄清为什么我需要这个。我正在使用来自的多文件上载代码 http://www.morningz.com/?p=5

30 回复 | 直到 7 年前

200

shiba 13 年前

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

这肯定会奏效,因为我在项目中使用了它。我希望这有帮助:)

ampersandre 13 年前

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

您可以在此处尝试一个工作示例: 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>

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

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

PHPGuru 12 年前

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

然后我想起我看到了一个 example for the JQuery File Upload 没有文本框。所以我所做的是,我以他们为例,将其剥离到相关部分。

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

Suresh Pattu 5 年前

for attribute 将“for”属性值指定给“文件输入”按钮。
现在,当您单击标签时,浏览器将自动打开文件浏览对话框弹出窗口。

查看下面的现场演示。

$('#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>

DavidO 14 年前

试试这个:

CSS

#file { width:0; height:0; }

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

nikotromus 9 年前

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

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

完成!超级干净,超级简单。。。

Erik van Brakel scottrakes 17 年前

article on quirksmode.org 关于文件输入的怪癖。我向你保证这不会让你高兴(我是凭经验说的)。

[编辑]

另一个选择是使用我链接的文章中的技术,尝试将其样式设置为按钮。

Community Mohan Dere 15 年前

修复在所有浏览器中工作断然的:

      <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

divyenduz 9 年前

另一种简单的方法。在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/

GoreOle 12 年前

我使用了上面推荐的一些代码,在花了好几个小时的时间后,我最终找到了一个无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/>

Zooza S 10 年前

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

至少它在狩猎中起了作用。

简单明了。

D-Inventor 12 年前

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

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

Fabian Schmengler 10 年前

您可以在隐藏文件输入上调度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>

Anoop saju 10 年前

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

希望这能奏效:)

steliosbl 8 年前

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

nicholmen 8 年前

不需要javascript,早在IE 9就可以清除跨浏览器

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

user110714 user110714 17 年前

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

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

问题是隐藏文本字段的width属性在浏览器之间、Windows XP主题之间都会明显不同,等等。也许这是你可以处理的?。。。

Keleko 13 年前

我知道这是一篇老文章,但让文本消失的一个简单方法就是将文本颜色设置为背景颜色。

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

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

StarsSky 12 年前

这对我很有用:

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

ThomasG 15 年前

我的解决方案是将其设置在一个div中,就像“druveen”所说的那样,但是我将自己的按钮样式添加到该div中(使其看起来像一个带有:hover的按钮),并且我只将样式设置为“opacity:0输入。对我来说很有魅力,希望对你也一样。

user2133061 user2133061 12 年前

Somwang Souksavatd 13 年前

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

user1852108 user1852108 13 年前

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

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

user1965301 13 年前

对于所有浏览器:

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

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

Tim Post Samir J M Araujo 13 年前

tmanthey的答案很好,只是你不能在FirefoxV20中使用边框宽度。如果你看到 link (演示,这里不能真正显示)他们使用font size=23px,transform:translate(-300px,0px)缩放(4)解决了这个问题,让Firefox的按钮变大。

其他解决方案使用。如果您想将另一个div设置为拖放输入框,则在该div上单击()是无用的。

Matthew Pautzke 12 年前

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

StarsSky 12 年前

使用以下代码进行解析:

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

MadMaxIII 10 年前

我写道:

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

Dan Randolph 10 年前

Asp。净加价

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

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

货物堆装与系固安全操作规则

.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”点击触发器进行标准服务器回发。当输入控件溢出时,with“Upload File”文本将其推到包装器div中的视图之外,因此无需为“File input”控件div应用任何样式。$([id$=“FileInput”])选择器允许使用标准ASP。应用的净前缀。hdnFileName中服务器代码隐藏设置中的FilePath文本框值。文件上传后的值。