Help us understand the problem. What is going on with this article?

dropzone.jsでファイルアップロードUIをつくる

More than 3 years have passed since last update.

dropzone.jsとは

ドラッグ&ドロップのファイルアップロードUIが作れるjsのライブラリ。

dropzone.jsでできること

  1. ドラッグ&ドロップによるファイルアップロードUIの提供
  2. アップロードしたファイルを非同期でサーバへpost
  3. アップロードしたファイルのプレビュー表示
  4. アップロードの進捗ステータスを表示

ダウンロード

dropzone.js公式サイトからダウンロード

使い方

HTML
<script src="jquery.js"></script>
<script src="dropzone.js"></script>

<form class="dropzone" id="my-awesome-dropzone">
  <input name="file" type="file" id="my-awesome-dropzone" multiple />
</form>
<div class='drag-and-drop-area'></div>
CoffeeScript
# Dropzone設定
Dropzone.autoDiscover = false
# Dropzoneフォームのidをキャメルケースで記述
Dropzone.options.myAwesomeDropzone = {}

# Dropzone初期化(urlはpost先を指定)
myDropzone = new Dropzone '.drag-and-drop-area', {url: '/images/upload'}

これでドラッグ&ドロップ可能なUIと非同期でサーバにファイルをpostできるようになる。簡単。

実装サンプル

Tumblr.png

sample.html
<div class="drag-and-drop-area drag-and-drop-area-out">
  <span>
    <i class="fa fa-image"></i>
    Drag and drop your files
  </span>
</div>
style.css
.drag-and-drop-area {
  color: #ccc;
  height: 200px;
  margin: 30px 0 20px;
  border-style: dashed;
  border-width: 2px;
  line-height: 200px;
  text-align: center;
  cursor: pointer;
}

.drag-and-drop-area-over {
  border-color: #0000FF;
}

.drag-and-drop-area-over span {
  opacity: 0.2;
}

.drag-and-drop-area-out {
  border-color: #ccc;
}

.drag-and-drop-area-out span {
  opacity: 1;
}
file_upload.coffee
$ ->
  Dropzone.autoDiscover = false
  Dropzone.options.myAwesomeDropzone = {
    paramName : "file"
    parallelUploads: 1
    acceptedFiles: 'image/*'
    maxFiles: 10
    maxFilesize: 0.5
    dictFileTooBig: "uploaded file is too large({{filesize}}MiB). limit: {{maxFilesize}}MiB."
    dictInvalidFileType: "Image file only"
    dictMaxFilesExceeded: "10 files limit"
  }

  myDropzone = new Dropzone ".drag-and-drop-area", {url:"/images/async_upload"}

  $('.drag-and-drop-area').on {
    click: (e)->
      $('#file_input').click()
    mouseover: (e)->
      $(this).removeClass('drag-and-drop-area-out')
      $(this).addClass('drag-and-drop-area-over')
    mouseout: (e)->
      $(this).removeClass('drag-and-drop-area-over')
      $(this).addClass('drag-and-drop-area-out')
    dragover: (e)->
      $(this).removeClass('drag-and-drop-area-out')
      $(this).addClass('drag-and-drop-area-over')
    dragleave: (e)->
      $(this).removeClass('drag-and-drop-area-over')
      $(this).addClass('drag-and-drop-area-out')
  }

おしまい

他にもオプションやコールバックが用意されているので、カスタマイズして色々遊べそう。
公式サイト : http://www.dropzonejs.com/

saekis
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away