PbTimes 情報誌

Jquery ドラッグ＆ドロップで画像をアップロードできる Doropzone.js

2016/01/27

• Ajax
• JavaScript
• Web

Doropzone.js

概要

Dropzone.jsは、Ajaxを利用した非同期で画像をアップロードできるJqueryライブラリ。
当記事では、複数のドロップ領域が必要になることを想定したコードを紹介しています。

ダウンロード

以下のダウンロードサイトより、ライブラリをダウンロードします。

Doropzone.js サイト
Doropzone.js ダウンロード(Git)

使い方

使い方のサンプルを掲載します。

[HTMLコード]

<link href="css/dropzone.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/dropzone.js"></script>

<div class="my-awesome-dropzone" class="dropzone"></div>
<div id="my-preview-dropzone" class="dropzone"></div>

ファイルをドロップする領域と表示するエリアを指定しました。
ファイルをドロップする領域は複数設定できるようclassで指定しています。

[JavaScriptコード]

var myAwesomeDropzone = function() {
    Dropzone.autoDiscover = false;

     $('.my-awesome-dropzone').dropzone({
	url:"upload.php",
        paramName : "file",
        parallelUploads:1,
        acceptedFiles:'image/*',	// 画像ファイルのみ
        maxFiles:10,
        maxFilesize:1,
        dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.",
        dictInvalidFileType: "画像ファイルを選択してください。",
        dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
	dictDefaultMessage: "＋",
	dictRemoveFile: "×",
	addRemoveLinks: true,
	previewsContainer:  "#my-preview-dropzone",
	accept: function(file, done) {
		return done();
	},
	success:function(file, response_text, e) {
		// upload.php で echo された内容が response_text に入ります。
	},
	drop: function(e) {
		this.element.classList.remove("selected");
	},
	dragover: function(e) {
		this.element.classList.add("selected");
	},
	dragleave: function(e) {
		this.element.classList.remove("selected");
	},
	complete: function(file, message) {
	},
	error: function(file, message) {
		alert(message);
		this.removeFile(file);
	}
    });
}

$(function(){
    myAwesomeDropzone();
});

クラス名でdropzoneを呼び出すことで、複数のドロップ領域を利用できるようにしています。

[PHPコード]

if (is_uploaded_file($_FILES['file']['tmp_name'])){
	//ファイル保存処理

	echo 'success';
}

$_FILES['file'] にアップロードしたファイルが格納されているため、保存するなりリサイズするなり好きに実装してください。