我正在尝试创建/自定义默认文件类型输入，以便它们在所有常见浏览器中看起来都相同。我正在做的是隐藏默认输入并显示我的自定义文件类型输入。然后我使用触发方法触发隐藏输入的原生点击事件。然后我触发本机更改事件以使用更改事件获取选择/选定的文件名。一切正常。所有这些我都是从我创建的插件中完成的。
但由于可以有超过 1（一个）文件类型输入，我的解决方案无法正常工作。更改事件仅附加到最后一个输入。
这是我的 js 代码： $.widget("jQuery.jFile", { options: {
wrapperClass:'custom-file',
buttonClass:'custom-file-button',
hideClass:'hidden',
inputClass:'custom-file-input',
disabledClass:'custom-file-disable',
disabled:false,
validation:false,
inputValue:'No file choosen'
},
_init: function(option) {
var settings = $.extend({}, this.options, option);
var element = this.element;
$(element).wrapAll('<span/>').before('<span/>').prev('span').addClass(settings.buttonClass).html('Choose File').next('input').addClass(settings.hideClass).after('<span/>').next('span').addClass(settings.inputClass).text(settings.inputValue).parent().addClass(settings.wrapperClass);
if(navigator.userAgent.toLowerCase().indexOf('firefox')>-1) $('.'+settings.wrapperClass).addClass('ff');
//Bind events
$('.'+settings.buttonClass).bind('click',this.openFileDialog).bind('mouseover',this.fileDialogMouseover).bind('mouseout',this.fileDialogMouseout).bind('keypress, mousedown', this.fileDialogKeypress).next('input').bind('change',this.fileDialogChange);
},
disable: function() {
this.options.disabled = true;
},
enable: function() {
this.options.disabled = false;
},
openFileDialog: function(){
$(this).next('input').trigger('click');
},
fileDialogChange: function(){
file_value=$(this).val();
file=file_value.split('\\');
filename=file[file.length-1];
if(filename.length>32) filename=filename.substring(0, 29) + '...';
$(this).next('span').text(filename);
},
fileDialogMouseover: function(){
$(this).addClass('hover').removeClass('active');
},
fileDialogMouseout: function(){
$(this).removeClass('hover').removeClass('active');
},
fileDialogKeypress: function(){
$(this).addClass('active').removeClass('hover');
}
});