ドラッグ&ドロップでファイルをアップロードできるプラグイン「Dropify.js」
2019.04.19 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
今回は、フォーム内にファイルのアップロードボタンを実装する際に、ドラッグ&ドロップでファイルをアップロードできるようになるプラグイン「Dropify.js」を紹介します。
デモページはこちら。
デフォルトのアップロードボタンでは、参照ボタンをクリックしてファイルを選ぶ必要があり、アップロードした後もページ上にはファイル名しか表示されません。
一方「Dropify.js」を使用したアップロード領域では、クリックしてファイルを選択できるのはもちろん、領域にファイルをドラッグ&ドロップするだけでアップロードすることができます。
また、画像をアップロードした場合はサムネイルまで表示されます！
領域にフォーカスを当てるとREMOVEボタンが表示されるので、誤ってアップした際に削除するのも簡単ですね。
実装方法
1.プラグインをダウンロードします。
Githubからダウンロードしてください。
使用するファイルはdistフォルダ内の以下になります。
- dropify.js もしく はdropify.min.js
- dropify.css もしく はdropify.min.css
- fontsフォルダ内のフォント（アイコンの表示に必要になります）
2.jsとcssを読み込ませます。
|
1 2 |
<link rel="stylesheet" type="text/css" href="css/dropify.css"> <script src="js/dropify.js"></script> |
3.対象のinputタグに、class=”dropify”を追加します。
|
1 |
<input type="file" class="dropify" name="file"> |
4.dropify.jsの実行処理を入れます。
先程jsを読み込んだ続きに書きます。
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('.dropify').dropify(); }); </script> |
以上で、アップローダーが完成です！
デフォルトが英語のため、”Drag and drop～”」”などの説明を日本語にする場合はjsの編集が必要になりますが、簡単に格好良いアップロード機能が実装できるので、ぜひ試してみてください！
関連記事こちらの記事も合わせてどうぞ。
