ドラッグ＆ドロップでファイルのアップロードする[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);
	},
};