すべての一般的なブラウザで同じように見えるように、デフォルトのファイルタイプ入力を作成/カスタマイズしようとしています。私がやっていることは、デフォルトの入力を非表示にして、カスタム ファイル タイプの入力を表示することです。次に、トリガー メソッドを使用して、非表示の入力のネイティブ クリック イベントをトリガーします。次に、ネイティブの変更イベントをトリガーして、変更イベントを使用して選択/選択されたファイル名を取得します。すべて正常に動作します。これらはすべて、私が作成したプラグインから行います。
しかし、複数のファイルタイプの入力が存在する可能性があるため、私のソリューションは正しく機能しません。変更イベントは、最後の入力のみに関連付けられます。
これが私の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');
}
});