更改inputtypes=“文件”中的默认文本?

当我们使用input="file"时候,我想在“ Choose File ”button上改变默认文本。

在这里输入图像描述

我该怎么做? 正如你所看到的图像button在文本的左侧。 我怎样才能把它放在文本的右侧?

每个浏览器都拥有自己的控件,因此您不能更改控件的文本或方向。

如果你想要一个HTML / CSS的解决scheme,而不是一个Flash或Silverlight的解决scheme,你可能想尝试一些“种”的黑客。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

http://www.appelsiini.net/projects/filestyle

就个人而言,因为大多数用户坚持自己select的浏览器,因此可能习惯于在默认情况下看到控制,如果他们看到不同的东西(取决于您处理的用户的types),他们可能会感到困惑, 。

使用label "for"属性进行input

 <div> <label for="files" class="btn">Select Image</label> <input id="files" style="visibility:hidden;" type="file"> </div> 

这可能有助于将来的某个人,你可以根据你的喜好设置input标签的样式,并把任何你想要的内容放在里面,并用display none来隐藏input。

它完美的与cordova与iOS

 <link href="ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/> <label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label> <input type="file" id="imageUpload" accept="image/*" style="display: none"> 

这不可能。 否则,您可能需要使用Silverlight或Flash上​​传控件。

使用Bootstrap你可以做下面的代码。

 <!DOCTYPE html> <html lang="en"> <head> <style> .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } </style> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <span class="btn btn-file">Upload image from here<input type="file"> </body> </html> 

在这里你可以做到这一点:

jQuery的:

 $(function() { $("#labelfile").click(function() { $("#imageupl").trigger('click'); }); }) 

CSS

 .file { position: absolute; clip: rect(0px, 0px, 0px, 0px); display: block; } .labelfile { color: #333; background-color: #fff; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; white-space: nowrap; padding: 6px 8px; font-size: 14px; line-height: 1.42857143; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

HTML代码:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="margin-top:4px;"> <input name="imageupl" type="file" id="imageupl" class="file" /> <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label> </div> 

我做了一个脚本,并在GitHub上发布:get selectFile.js易于使用,随意克隆。

HTML

 <input type=file hidden id=choose name=choose> <input type=button onClick=getFile.simulate() value=getFile> <label id=selected>Nothing selected</label> 

JS

 var getFile = new selectFile; getFile.targets('choose','selected'); 

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

我会用一个button来触发input

 <button onclick="document.getElementById('fileUpload').click()">Open from File...</button> <input type="file" id="fileUpload" name="files" style="display:none" /> 

快速,干净。

我想这是你想要的:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button> <input type='file' id="getFile" style="display:none"> </body> </html> 

这应该工作:

input。 className :: webkit-file-upload-button { style content .. }

让我添加一个我用过的黑客。 我想有一个允许拖放文件的部分,我希望拖放部分可以与原始上传button一起点击。

下面是我完成后的样子 (减去拖放function,有很多关于如何做的教程)。

然后我实际上创build了一系列主要关于file uploadbutton的博客文章 。

确定非常简单的纯CSS创build自定义input文件的方式。

使用标签,但正如你从以前的答案中知道,标签不会调用Firefox中的onclick函数,可能是一个错误,但与以下内容无关。

 <label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label> 

你做什么是风格的标签,看看你想如何

  .custom-file-input { color: transparent;/* This is to take away the browser text for file uploading*/ /* Carry on with the style you want */ background: url(../img/doc-o.png); background-size: 100%; position: absolute; width: 200px; height: 200px; cursor: pointer; top: 10%; right: 15%; } 

现在只需隐藏实际的inputbutton,但不能将其设置为visability: hidden

所以通过设置opacity: 0;来隐藏opacity: 0;

 input.custom-file-input { opacity: 0; position: absolute;/*set position to be exactly over your input*/ left: 0; top: 0; } 

现在你可能已经注意到我在我的标签上有同样的类,因为我要input字段,这是因为我希望两者具有相同的样式,因此,如果您点击标签,您实际上点击了不可见input字段。

2017年更新:

我已经研究了如何实现这一点。 最好的解释/教程在这里: https : //tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

我会在这里写摘要,以防万一它不可用。 所以你应该有HTML:

 <input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label> 

然后用CSS隐藏input:

 .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;} 

然后风格的标签:

 .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } 

然后可以select添加JS来显示文件的名称:

 var inputs = document.querySelectorAll( '.inputfile' ); Array.prototype.forEach.call( inputs, function( input ) { var label = input.nextElementSibling, labelVal = label.innerHTML; input.addEventListener( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else fileName = e.target.value.split( '\\' ).pop(); if( fileName ) label.querySelector( 'span' ).innerHTML = fileName; else label.innerHTML = labelVal; }); }); 

但真的只是阅读教程,下载演示,这是非常好的。