ドラッグ&ドロップでファイルをアップロードできるプラグイン「Dropify.js」

tecmemo190420

 

こんにちは、ウェブラボクリエイターズメモです。
今回は、フォーム内にファイルのアップロードボタンを実装する際に、ドラッグ&ドロップでファイルをアップロードできるようになるプラグイン「Dropify.js」を紹介します。

 

デモページはこちら
デフォルトのアップロードボタンでは、参照ボタンをクリックしてファイルを選ぶ必要があり、アップロードした後もページ上にはファイル名しか表示されません。
一方「Dropify.js」を使用したアップロード領域では、クリックしてファイルを選択できるのはもちろん、領域にファイルをドラッグ&ドロップするだけでアップロードすることができます。
また、画像をアップロードした場合はサムネイルまで表示されます!
領域にフォーカスを当てるとREMOVEボタンが表示されるので、誤ってアップした際に削除するのも簡単ですね。

 

実装方法

1.プラグインをダウンロードします。

Githubからダウンロードしてください。

使用するファイルはdistフォルダ内の以下になります。

  • dropify.js もしく はdropify.min.js
  • dropify.css もしく はdropify.min.css
  • fontsフォルダ内のフォント(アイコンの表示に必要になります)

2.jsとcssを読み込ませます。

3.対象のinputタグに、class=”dropify”を追加します。

4.dropify.jsの実行処理を入れます。

先程jsを読み込んだ続きに書きます。

 

以上で、アップローダーが完成です!
デフォルトが英語のため、”Drag and drop~”」”などの説明を日本語にする場合はjsの編集が必要になりますが、簡単に格好良いアップロード機能が実装できるので、ぜひ試してみてください!

  • このページを共有する