更改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; }); });
但真的只是阅读教程，下载演示，这是非常好的。
