ドラッグ&ドロップでファイルのUploadを実現する「dropzone.js」

「dropzone.js」はドラッグ&ドロップでファイルをUploadするUIを提供するjQueryプラグインです。

dropzone.js

screenshot242

ファイルアップローダーを実装するプラグインはたくさんありますが、「dropzone.js」の特筆すべき点はデザイン性の高さと、実装の簡単さにあります。まずそのデザインをデモ画像を通じてご紹介します。

Uploadする前はこのような状態です。

screenshot243

画像をドラッグ&ドロップします。するとUploadが始まります。プログレスバーが表示され、どれくらいで処理が完了するかが分かります。

screenshot244

 

画像のUploadが完了しました。このようにミニサイズの画像が表示されます。

screenshot245

 

では、「dropzone.js」の最も基本的な実装方法についてご紹介します。まずは外部ファイルを読み込みます。

<script src="dropzone.min.js"></script>

 

HTMLはこのようにマークアップします。

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

 

CSSは必須ではありませんが、そのままでは実装方法を紹介する上で伝わりにくいので。

form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  padding: 10px;
}

 

JSはこの1行だけ。formで設定したclass名をrequire()で指定しましょう。

var Dropzone = require("dropzone");

 

するとこのようにシンプルなファイルアップローダーを作ることが出来ました。オプションやCSSで上記のようなプログレスバーなども実装できます。

screenshot246

もちろんサーバーサイドも実装する必要がありますが、それらのチュートリアルも上記リンク先で紹介されています。現時点で、Node.js、Ruby on rails、PHPのチュートリアルが載せられています。ファイルアップローダーの実装を検討中の方は参考にどうぞ。

 

Home > JavaScript > ドラッグ&ドロップでファイルのUploadを実現する「dropzone.js」

Return to page top