Edited at

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/