<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
我认为这就是你想要的:
<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">
其他回答
“上传文件…”文本是浏览器预先定义的,不能更改。 解决这个问题的唯一方法是使用Flash或基于java的上传组件,比如swfupload。
你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件,我保持现有的值属性。您只需要添加css。你可以试试这个解决方案。
.btn-file-upload { 宽度:187 px; 位置:相对; } .btn-file-upload:{后 内容:attr(价值); 位置:绝对的; 上图:0; 左:0; 底部:0; 宽度:48%; 背景:# 795548; 颜色:白色; border - radius: 2 px; text-align:中心; 字体大小:12 px; 行高:2; } <input type="file" class="btn-file-upload" value="Uploadfile" />
编辑:我现在看到的评论,你是关于按钮文本,而不是文件路径。我的坏。我将把我最初的答案留在下面,以防其他人偶然发现这个问题,以我最初的方式解释它。
我删除了这个答案,因为我认为我误解了这个问题,我的答案是不相关的。然而,另一个答案中的评论表明,人们仍然想看到这个答案,所以我将其删除。
我最初的回答(我以为OP是在问路径,而不是按钮文本):
出于安全原因,该特性不受支持。Opera网络浏览器曾经支持这一点,但它被删除了。想想如果这得到支持会发生什么;您可以创建一个带有文件上传输入的页面,用一些敏感文件的路径预先填充它,然后使用onload事件触发的javascript自动提交表单。这将发生得太快,用户无法对此采取任何措施。
在所有浏览器上都能完美工作,希望它也能为你工作。
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);
}
更改内容:“选择一些文件”;里面有你想要的文本
如果不与firefox工作,然后使用这个而不是输入:
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
使用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.">