maechabin/ajaxでファイルをアップロードする方法(php)

## ajaxでファイルをアップロードする方法(php)
<?php
/*
if (is_uploaded_file($_FILES["file"]["tmp_name"])) {

	if (move_uploaded_file($_FILES["file"]["tmp_name"], "csv/" . $_FILES["file"]["name"])) {

		chmod("csv/" . $_FILES["file"]["name"], 0644);

	}

}
*/
class Upload {

	private function upload_file() {

		move_uploaded_file($_FILES["file"]["tmp_name"], "csv/" . $_FILES["file"]["name"]);

	}

	public function init() {

		$this->upload_file();

	}

}

$upload = new Upload();
$upload->init();
?>

## ajaxでファイルをアップロードする方法（html & js）
<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>配信準備中ページ管理画面</title>
<style>
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック' !important;
}
#form {
	margin: 16px auto;
	text-align: center;
	padding: 18px;
	width: 560px;
	background-color: #eee;
	border-radius: 2px;
}
input[type="file"],
input[type="submit"] {
	cursor: pointer;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック';
}
.button {
	display: block;
	margin: 16px auto 0;
	width: 300px;
	line-height: 50px;
	background-color: #2980b9;
	border: none;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>

<form id="form" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<input type="submit" value="ファイルをアップロードする" class="button">
</form>

<script>


	var upload = (function () {

		var form = $("#form");

		function send_data() {

			form.on("submit", function () {

				upload_file().done(function () {
					alert("aaa");
				});

//				upload_file();

			});

			return false;

		}

		function upload_file() {

			var fd = new FormData(form.get(0));
			var d = new $.Deferred();

			$.ajax({

				url: "upload.php",
				type: "post",
				data: fd,
				processData: false,
				contentType: false,
				success: d.resolve,
				error: d.reject

			});

			return d.promise();

		}

		return {

			init: function () {
				send_data();
			}

		};

	} ());

	upload.init();


</script>
</body>

</html>
	<?php
	/*
	if (is_uploaded_file($_FILES["file"]["tmp_name"])) {

	if (move_uploaded_file($_FILES["file"]["tmp_name"], "csv/" . $_FILES["file"]["name"])) {

	chmod("csv/" . $_FILES["file"]["name"], 0644);

	}

	}
	*/
	class Upload {

	private function upload_file() {

	move_uploaded_file($_FILES["file"]["tmp_name"], "csv/" . $_FILES["file"]["name"]);

	}

	public function init() {

	$this->upload_file();

	}

	}

	$upload = new Upload();
	$upload->init();
	?>
	<!DOCTYPE html>

	<html>

	<head>
	<meta charset="UTF-8">
	<title>配信準備中ページ管理画面</title>
	<style>
	body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳＰゴシック' !important;
	}
	#form {
	margin: 16px auto;
	text-align: center;
	padding: 18px;
	width: 560px;
	background-color: #eee;
	border-radius: 2px;
	}
	input[type="file"],
	input[type="submit"] {
	cursor: pointer;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳＰゴシック';
	}
	.button {
	display: block;
	margin: 16px auto 0;
	width: 300px;
	line-height: 50px;
	background-color: #2980b9;
	border: none;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	</head>

	<body>

	<form id="form" method="post" enctype="multipart/form-data">
	<input type="file" id="file" name="file">
	<input type="submit" value="ファイルをアップロードする" class="button">
	</form>

	<script>


	var upload = (function () {

	var form = $("#form");

	function send_data() {

	form.on("submit", function () {

	upload_file().done(function () {
	alert("aaa");
	});

	// upload_file();

	});

	return false;

	}

	function upload_file() {

	var fd = new FormData(form.get(0));
	var d = new $.Deferred();

	$.ajax({

	url: "upload.php",
	type: "post",
	data: fd,
	processData: false,
	contentType: false,
	success: d.resolve,
	error: d.reject

	});

	return d.promise();

	}

	return {

	init: function () {
	send_data();
	}

	};

	} ());

	upload.init();


	</script>
	</body>

	</html>