<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
编辑:我现在看到的评论,你是关于按钮文本,而不是文件路径。我的坏。我将把我最初的答案留在下面,以防其他人偶然发现这个问题,以我最初的方式解释它。
我删除了这个答案,因为我认为我误解了这个问题,我的答案是不相关的。然而,另一个答案中的评论表明,人们仍然想看到这个答案,所以我将其删除。
我最初的回答(我以为OP是在问路径,而不是按钮文本):
出于安全原因,该特性不受支持。Opera网络浏览器曾经支持这一点,但它被删除了。想想如果这得到支持会发生什么;您可以创建一个带有文件上传输入的页面,用一些敏感文件的路径预先填充它,然后使用onload事件触发的javascript自动提交表单。这将发生得太快,用户无法对此采取任何措施。
其他回答
对我来说,它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰,但文本是奇怪的改变,在与css摔跤之前,我尝试以下:
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});
bootstrap- filstyle使用名为buttontext的类将组件渲染为span,因此当文档加载时只需更改文本。很简单,它必须在所有浏览器上工作。
干杯
隐藏文件输入。创建一个新的输入来捕捉点击事件,并将其转发到隐藏的输入:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
除了MushyPeas的答案,你可以添加一个标签来显示文件名(不需要jQuery): 也要归功于这个答案。
<input type="button" id="click-input" value="Write anything" onclick="document.getElementById('file').click();" /> <label for="click-input" id="file-name">Bla bla</label> <input type="file" style="display:none;" id="file"> <script> inputElement = document.getElementById('file') labelElement = document.getElementById('file-name') inputElement.onchange = function(event) { var path = inputElement.value; if (path) { labelElement.innerHTML = path.split(/(\\|\/)/g).pop() } else { labelElement.innerHTML = 'Bla bla' } } </script>
我知道,没有人要求它,但如果有人使用bootstrap,它可以通过标签和CSS伪选择器改变。
更改按钮文本:
.custom-file-label::after {
content: "What's up?";
}
更改字段文本:
<label class="custom-file-label" for="upload">Drop it like it's hot</label>
这是小提琴。
“上传文件…”文本是浏览器预先定义的,不能更改。 解决这个问题的唯一方法是使用Flash或基于java的上传组件,比如swfupload。