改变输入类型=“文件”标签内容 [英] Alter input type="file" label content
本文介绍了改变输入类型=“文件”标签内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否有任何方法隐藏或更改默认标签的内容:未选择文件
I was wondering if there is any way to hide or change the content of the default label:No file chosen
for
<input type="file" id="myFileInput"/>
到目前为止,我想到的是将其长度减半,以便显示工具提示。
What I come up with so far is to decrease its length by half, so that it displays a tooltip.
$('input:file').css('width', parseFloat($($('input:file')).css('width'))/2 );
任何想法?
推荐答案
您不能将输入文件设计作为其本机更改为每个浏览器。但你仍然可以模拟它,对不起hacky:
You cannot change input file design as its native to each browser. But you still can simulate it, sorry hacky:
<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple />
JS:
$(function () {
$('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
$('#myFileInput').click()
});
$('#myFileInput').on('change', function () {
var files = this.files;
if (!files.length) {
$('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
return;
}
$('label[for=btn_myFileInput]').empty();
for (var i = 0, l = files.length; i < l; i++) {
$('label[for=btn_myFileInput]').append(files[i].name + '\n');
}
});
});
这篇关于改变输入类型=“文件”标签内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文