【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メソッドはそれを削除します。

#ソース
こちらからダウンロードしてください。
2024/12/18: githubにソースを移動させました

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