<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
<input type="file" value="Browse" name="avatar" id="id_avatar" />
我试图修改该值,但它不起作用。如何自定义按钮文本?
当前回答
下面是一个用纯HTML和javascript“改变”文件类型输入文本的方法:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
其他回答
在所有浏览器上都能完美工作,希望它也能为你工作。
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">
这是一个JQuery插件,用于更改输入文件元素的按钮文本。
示例HTML:
<input type="file" id="choose-file" />
JS示例:
$('#choose-file').inputFileText({
text: 'Select File'
});
结果:
如果你使用rails,有问题应用它,我想从@Fernando Kosh发布的原始答案中添加一些提示
下载zip文件,复制bootstrap- filstyle .min.js ke文件夹app/assets/javascripts/ 打开你的application.js并在下面添加这一行 //= require bootstrap- filstyle .min 打开你的咖啡,加入这条线 $(“文件”)。filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: "你的文本在这里",icon: false});
<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/
对我来说,它不工作自定义文本与bootstrap文件样式。它有助于按钮装饰,但文本是奇怪的改变,在与css摔跤之前,我尝试以下:
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});
bootstrap- filstyle使用名为buttontext的类将组件渲染为span,因此当文档加载时只需更改文本。很简单,它必须在所有浏览器上工作。
干杯