如何改变<input type =“file”/>的button文字？
<input type="file" value="Browse" name="avatar" id="id_avatar" /> 我试图修改该value ，但它不工作。 如何自定义button文本？
使用Bootstrap FileStyle ，用于设置表单的文件字段的样式。 它是一个名为Twitter Bootstrap的基于jQuery的组件库插件
示例用法：
包括：
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
通过JavaScript：
$(":file").filestyle();
通过数据属性：
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
你可以把图像，而是这样做：
HTML：
<img src="http://img.dovov.comuploadButton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" />
JQuery的：
$("#upfile1").click(function () { $("#file1").trigger('click'); });
CAVEAT ：在IE9和IE10中，如果你通过JavaScript触发onClick文件input，表单将被标记为“危险”，不能用javascript提交，不知道是否可以传统提交。
“上传文件…”文本由浏览器预先定义，不能更改。 解决这个问题的唯一方法是使用基于Flash或Java的上传组件，如swfupload 。
隐藏文件input。 创build一个新的input来捕获点击事件并将其转发到隐藏的input：
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" /> <input type="file" style="display:none;" id="file" name="file"/>
在所有浏览器上完美运行希望它也能为您工作。
HTML：
<input type="file" class="custom-file-input">
CSS：
.custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; } .custom-file-input:hover::before { border-color: black; } .custom-file-input:active::before { background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); }
更改content: 'Select some files'; 与你想要''
如果不使用Firefox，那么使用这个而不是input：
<label class="custom-file-input" for="Upload" > </label> <input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" /> <div class="fileUpload btn btn-primary"> <span>Your name</span> <input id="uploadBtn" type="file" class="upload" /> </div>
JS
document.getElementById("uploadBtn").onchange = function () { document.getElementById("uploadFile").value = this.value; };
更多http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
这是一个JQuery插件来更改input文件元素的button文本。
HTML示例：
<input type="file" id="choose-file" />
示例JS：
$('#choose-file').inputFileText({ text: 'Select File' });
结果：
编辑 ：我现在看到你正在问的关于button文本，而不是文件path的意见。 我的错。 我会在下面留下我原来的答案，以防其他人在这个问题上发生磕磕绊绊的解释，我原来的方式。
第二编辑 ：我删除了这个答案，因为我决定我误解了这个问题，我的答案是不相关的。 然而，在另一个答案的意见表明，人们仍然希望看到这个答案，所以我删除它。
我原来的回答 （我以为OP是问path，而不是button文本）：
出于安全原因，这不是支持的function 。 Operanetworking浏览器用于支持这一点，但它被删除。 想一下，如果支持的话可能会有什么可能的; 您可以创build一个带有file uploadinput的页面，预先填充一个敏感文件的path，然后使用由onload事件触发的javascript自动提交表单。 这会发生得太快，用户无法做任何事情。
- 在
<input type="file">，添加一个图像和<input style="position:absolute">它将占用<input type="file"> -
使用以下CSS到文件元素
position:relative; opacity:0; z-index:99;
使用<label>作为标题
<form enctype='multipart/form-data' action='/uploads.php' method=post> <label for=b1> <u>Your</u> caption here <input style='width:0px' type=file name=upfile id=b1 onchange='optionalExtraProcessing(b1.files[0])' accept='image/png'> </label> </form>
这工作没有任何JavaScript 。 您可以将标签装饰到任何复杂程度，以达到您心中的内容。 当你点击标签时，点击自动被redirect到文件input。 文件input本身可以通过任何方法使其不可见。 如果你想让标签看起来像一个button，有很多解决scheme，例如：
label u { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }
如果您使用rails并有问题的应用，我想从@Fernando Kosh发布的原始答案中添加一些提示
- 下载文件zip和复制文件bootstrap-filestyle.min.js ke文件夹应用程序/ assets / javascripts /
-
打开你的application.js并在下面添加这一行
// =需要bootstrap-filestyle.min
-
打开你的咖啡，并添加这一行
$（“：file”）。filestyle（{buttonName：“btn-primary”，buttonBefore：true，buttonText：“Your text here”，icon：false}）;
这是一个可能对你有帮助的替代解决scheme。 这隐藏了出现在button外的文本，将其与div的背景色混合。 然后你可以给这个div一个你喜欢的标题。
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;"> UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" /> </div>
