inputtypes=文件只显示button

有没有一种方法来风格(或脚本) <input type=file />元素只有可见的“浏览”button没有文本字段?

谢谢

编辑 :只是为了澄清为什么我需要这个。 我使用http://www.morningz.com/?p=5的多file upload代码,并且不需要input文本字段,因为它从来没有价值。 脚本只是将新选定的文件添加到页面上的集合。 如果可能的话,没有文本字段,看起来好多了。

29 Solutions collect form web for “inputtypes=文件只显示button”

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

这将肯定工作,我用它在我的项目。我希望这有助于:)

我有一段时间试图完成这一点。 我不想使用Flash解决scheme,我查看的所有浏览器都没有可靠的jQuery库。

我想出了我自己的解决scheme,它完全用CSS实现(除了onclick风格的变化,使button出现“点击”)。

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

它的工作原理是创build一个大文件input(font-size:50px),然后将其封装在具有固定大小和溢出的div中:隐藏。 input只能通过这个“窗口”div来看到。 div可以被赋予一个背景图片或者颜色,文本可以被添加,并且input可以变得透明以显示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) } 

让我知道是否有任何问题,我会尽力解决它们。

今天我浪费了我的一天,让这个工作。 我发现这里没有任何解决scheme在我的每个场景中工作。

然后我记得我看到了一个JQueryfile upload没有文本框的例子 。 所以我所做的就是我拿自己的榜样,把它分解到相关部分。

这个解决scheme至less适用于IE和FF,并且可以被完全devise。 在下面的例子中,文件input隐藏在“添加文件”button的下方。

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

隐藏input文件元素,并创build一个可见的button,将触发该input文件的点击事件。

尝试这个:

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

这将是非常困难的。 文件inputtypes的问题是,它通常由两个可视元素组成,而被视为单个DOM元素。 除此之外,几个浏览器对文件input有自己独特的外观和感觉,而你被设置为恶梦。 请参阅quirksmode.org上有关文件input具有的怪癖的文章 。 我保证你不会让你开心(我从经验中讲)。

[编辑]

其实,我认为你可能会把你的input放在一个容器元素(如div),并添加一个负边距的元素。 有效地隐藏文本框部分。 另一个select是使用我链接的文章中的技巧,尝试像button一样进行devise。

修复在所有浏览器中工作解决:

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

我已经在FF,Chrome和IEtesting – 工作正常,应用风格也:D

用css隐藏input文件标签,添加一个标签并将其分配给inputbutton。 标签会被点击,点击后会popup文件对话框。

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

将样式添加到标签作为button。
现场演示

我使用了上面推荐的一些代码,经过几个小时的时间,我终于find了一个免费的解决scheme。

你可以在这里运行它 – http://jsfiddle.net/WqGph/

但随后find了更好的解决scheme – 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 type="file" id="myFile" style="display:none;" /> <button type="button" onclick="document.getElementById('myFile').click();">Browse</button> 

至less它在Safari中工作。

干净利落。

你可以标记一个图像,所以当你点击它的button的点击事件将被触发。 您可以简单地使正常button不可见:

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

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

您可以在隐藏文件input上分派点击事件,如下所示:

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

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

希望这个工程:)

这样做的另一个简单的方法。 在html中制作一个“inputtypes文件”标签并隐藏它。 然后点击一个button,并根据需要进行格式化。 在此之后使用javascript / jquery以编程方式单击button时单击input标记。

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/

我知道这是一个旧的职位,但一个简单的方法,使文本消失只是为您的背景设置文本颜色。

例如,如果你的文本input背景是白色的,

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

这将不会影响select文件,因为浏览器,它仍然是黑色的。

这适用于我:

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

我的解决scheme只是把它设置在一个像“druveen”说,但我把我自己的button风格的div(使其看起来像一个button:hover),我只是设置样式“不透明度:0;”。 到input。 为我工作的魅力,希望它也为你做。

我只是用一个宽度为85px的input文件来devise样式,文本字段完全消失了

我试图实现前两个解决scheme,最后浪费了我的时间。 最后,应用这个.css类解决了问题…

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

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

我真的很喜欢这个解决scheme…

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

问题是隐藏文本字段的宽度属性会在浏览器之间显着变化,在Windows XP主题之间会有所不同。 也许它可以和你一起工作?

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

所以这里是所有浏览器的最佳方法

忘了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。 要使其始终在所有浏览器上运行,必须每次都要dynamic创build并重新创build,以便每次清除input文本时:

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

tmanthey的答案是相当不错的,除了你不能在Firefox v20中使用边框宽度。 如果您看到链接 (演示,实际上不能显示在这里),他们解决了这个问题,使用font-size = 23px,transform:translate(-300px,0px)scale(4)来获得更大的button。

其他解决scheme使用.click()不同的div是无用的,如果你想使其成为拖放input框。

在这里有几个有效的选项,但我想我会给我想出来,而试图解决类似的问题。 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); } 

解决了以下代码:

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

我写了这个:

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

这里是@ ampersandrestream行解决scheme的简化版本,适用于所有主stream浏览器。 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”点击触发器与标准的服务器回发。 带有“上传文件”的文本会在输出控件溢出时将input控件从视图中移出,因此不需要为“文件input”控件div应用任何样式。 $([id $ =“FileInput”])select器允许应用带有标准ASP.NET前缀的ID部分。 从文件hdnFileName.Value后面的服务器代码中设置的FilePath文本框的值被上传。

这个HTML代码只显示上传文件button

 <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> 
  • 内联/内联块元素的CSS垂直alignment
  • validation本地机器上的HTML
  • mysqli_query()需要至less2个参数,1中给出?
  • 如何在电子邮件中发送HTML表单。而不仅仅是MAILTO
  • CSS列表样式图像大小
  • 居中alignment图像水平内
  • 如何使用knitr导入本地图像进行降价
  • HTML电子邮件devise的准则是什么?
  • Url.Action参数?
  • Uncaught TypeError:无法读取未定义的属性'top'
  • 为什么在HTML中使用onClick()是一个不好的做法?