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

最後に

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