ドラッグ&ドロップでファイルのアップロードする[Doropzone.js]

ゼロから作るとクロスブラウザ対策とかが面倒そうだったので、「Doropzone.js」というJSライブラリを使ってみた。
サポートブラウザは、「Chrome 7+」「Firefox 4+」「IE 10+」「Opera 12+」「Safari 6+」。IE9が使えないのが辛い。
ライセンスは「MIT License」
ファイルはここからダウンロード

目次

JSの読み込み

ドロップエリアを用意

静的に設置

クラスに「dropzone」を付けると自動でドロップゾーンに変わるっぽい。
input:file要素も自動で追加される。

動的に設置

// 追加
$('body').append('
'); // ドロップエリア化 var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "file-upload.php", /* ここにオプション書ける */ });

オプションを一部紹介

successやerrorなどの一部オプションは、設定するとデフォルト動作が上書きされるようなので注意する。
※英語なんとなくしか読めないので意味違ってる可能性あり

Dropzone.options.myAwesomeDropzone = {
// myDropzone.options.myAwesomeDropzone = {

	// ファイルを転送に使用される名前
	paramName: "file", 
	
	// 許可する最大バイト数(MB単位)
	maxFilesize: 1, 

	//ドロップエリアに入るメッセージ(HTML可)
	dictDefaultMessage: 'ファイルをここにドロップしてください。', 

	// サムネイルを入れていく要素
	// 未設定の場合、form要素の中に追加されていく
	previewsContainer: '#previewArea', 

	// サムネイルのテンプレート
	previewTemplate: '', // http://www.dropzonejs.com/#layoutを参照

	// アップロード前のバリデーション用?
	accept: function(file, done) {
		if (file.name == "hogehoge.png") {
			done("このファイルはアップできません。");
		} else {
			done();
		}
	},

	// アップロード状況
	uploadprogress: function(file, progress, bytesSent) {
		$(file.previewElement) // 対象の要素
		console.log(file);
		console.log(progress); // パーセント形式
		console.log(bytesSent); // バイト数
	},

	// 成功した場合
	success: function(file){
		$(file.previewElement) // 対象の要素
		console.log(file);
		console.log(JSON.parse(e.xhr.response)); // サーバーからのレスポンスを取得できる
	},

	// エラーがあった場合
	error: function(file, message) {
		$(file.previewElement) // 対象の要素
		console.log(file);
		console.log(message); // アップ失敗の理由
	},

	// 処理完了時
	complete: function(file){
		$(file.previewElement) // 対象の要素
		console.log(file);
	},
};
よかったらシェアしてね!

この記事を書いた人

目次
閉じる