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

2016/01/27

Doropzone.js

概要

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

ダウンロード

Doropzone.js

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

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'] にアップロードしたファイルが格納されているため、保存するなりリサイズするなり好きに実装してください。

  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る