Question

我正在尝试创建/自定义默认文件类型输入，以便它们在所有常见浏览器中看起来相同。我正在做的是隐藏默认输入并显示我的自定义文件类型输入。然后，我使用触发器方法触发隐藏输入的本机单击事件。然后我触发本机更改事件以使用change事件获取所选/选择的文件名。一切正常。我从我创建的插件中做了所有这些。

但由于可能有超过1（一）个文件类型输入，我的解决方案无法正常工作。更改事件仅附加到最后一个输入。

这是我的js代码： $ .widget（“jQuery.jFile”，{ 选项：{

    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');
}

}）;

Answer 1

我得到了答案。我必须在绑定相同事件之前取消绑定，以便触发事件被调用一次。

非常感谢：）

jQuery附加隐藏文件输入的更改事件

1 个答案: