【jQuery】ファイルダイアログを起動するプラグイン【JavaScript】

#ファイルダイアログを好きなタイミングで起動したい方へ
ファイルを選択させたいだけなのに<input type="file">って書くの嫌ですよね。
おまけに見た目もカッコ悪いし。

そんなあなたにお勧めなのがjquery.filedialog.js！
あなたが実装するのは、ファイルが選択された時の処理だけです！

#使い方
① まずこちらよりjquery.filedialog.jsをダウンロード

② 次にscriptタグで読み込む。(jqueryの後に読み込んでください。)

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.filedialog.js"></script>

③ 好きなタイミングで、$.file.open({onChange: function() {...}})メソッドを呼ぶ。

$(document).mousedown(function() {
	$.fileDialog.open({
		accept: '.png',
		onChange: function(files) {
			// ここに処理を書く			 
		}
	});		
});

④ ファイルダイアログでユーザーがファイルを選択したときに、onChangeが呼ばれる。
#openメソッド

openメソッドの引数は、

{
  accept: '.png',
  onChange: function(files) {  /* ここに処理を書く */ }
}

てな感じでオブジェクトを渡してください。

acceptについては、こちらを参照してください。acceptは省略可能です。

onChangeの引数はfilesです。1つ目のファイルを処理したい場合、files[0]としてください。

#clearメソッド

このメソッドは呼ばなくても基本大丈夫ですが、
ファイルダイアログが開かれてcancelされた時に、
非表示の<input type="file">が残ってしまいます。
clearメソッドはそれを削除します。

#ソース

$.fileDialog = (function() {
	var _FILE_ID = 'jqueryFileDialogPlugin',

	_open = function(option) {
		if(!option) { throw 'argument is invalid'; }
		_clear();
	    $('<input>')
	    .prop({ 
	    	type: 'file',
	    	id: _FILE_ID,
	    	accept: option.accept
	    })
	    .css({ display: 'none' })
	    .appendTo($('body'));

	    $('#' + _FILE_ID).trigger('click');
	    $('#' + _FILE_ID).on('change', function() {
	    	if(option.onChange) {
	    		option.onChange($('#' + _FILE_ID).prop('files'));
	    	}
	    	_clear();
	    });
	},

	_clear = function() {
		$('#' + _FILE_ID).off('change');
		if($('#' + _FILE_ID).length) { $('#' + _FILE_ID).remove(); }
	};

	return {
		open: _open,
		clear: _clear
	};
}());

#最後に
本プラグインは自由に使ってもらって大丈夫です。
著作権は放棄します。