隱藏文件輸入的jQuery附加更改事件

我試圖創建/自定義默認文件類型輸入，以便它們在所有常見瀏覽器中看起來相同。我在做的是隱藏默認輸入並顯示我的自定義文件類型輸入。然後，我使用觸發方法觸發隱藏輸入的本機點擊事件。然後，我觸發本地更改事件以使用更改事件獲取所選/選定的文件名。一切正常。所有這些我都是從我創建的插件中完成的。隱藏文件輸入的jQuery附加更改事件

但由於可能有多個（一個）文件類型輸入，我的解決方案無法正常工作。更改事件僅附加到最後一個輸入。

這裏是我的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'); 
}

}）;

來源

2013-01-09 Rupam Datta

我得到了答案。我必須在綁定之前解除綁定click事件，以便觸發事件被調用一次。

謝謝:)

來源

2013-01-09 11:47:51

隱藏文件輸入的jQuery附加更改事件

回答

相關問題