jQuery使ってAJAXでファイルアップロード

なんか毎回毎回うろ覚えでちょろちょろ調べながら書いている気がするのでメモとして

	<div id="drop-area" class="file-drop-area">
	<input id="upload-file" type="file" class="hidden"/>
	<button id="select-file" class="btn btn-primary">ファイルを選択</button>
	</div>

view raw 01_ajax-upload.html hosted with ❤ by GitHub

	jQuery(document).ready(function($) {
	var cancel = function(e) {
	e.preventDefault();
	e.stopPropagation();
	return false;
	};
	$('.file-drop-area').bind('dragenter', function(e) {
	$(this).addClass('drag-enter');
	return cancel(e);
	}).bind("dragleave", function(e) {
	$(this).removeClass('drag-enter');
	return cancel(e);
	}).bind('dragover', function(e) {
	return cancel(e);
	}).bind('drop', function(e) {
	$(this).removeClass('drag-enter');
	return cancel(e);
	});
	});

view raw 02_ajax-upload-common.js hosted with ❤ by GitHub

	jQuery(document).ready(function($) {
	var uploadFile = function(file) {
	formData = new FormData();
	formData.append('file', file);
	$.ajax({
	url: '/upload',
	type: 'POST',
	data: formData,
	processData: false,
	contentType: false
	}).done(function(data, status, response) {
	console.log('success');
	}).fail(function(response, status, thrown) {
	console.log(response.responseText);
	});
	};
	$('#drop-area').bind('drop', function(e) {
	if (e.originalEvent.dataTransfer.files.length > 0) {
	uploadFile(e.originalEvent.dataTransfer.files[0]);
	}
	});
	$('#upload-file').bind('change', function() {
	if (this.files.length > 0) {
	uploadFile(this.files[0]);
	}
	});
	$('#select-file').bind('click', function() {
	$('#upload-file').click();
	});
	});

view raw 03_ajax-upload.js hosted with ❤ by GitHub

今回はdragoverを補足してキャンセルしておかないとdropイベントを補足してくれなかったのにハマった
スタイル変えたり、イベント伝播のキャンセル処理は共通なので class で処理して共通jsに置く。
ドロップされた時の処理は、アップロード先やアップロード後の処理など画面ごとになる可能性が高いので id を使って個別jsに置くイメージ