画像を選択して$.ajaxでPUTしてアップロードするメモ

2018年8月23日2023年8月13日

画像を選択して、jqueryの$.ajaxでPUTしてアップロードするごく簡単なサンプルのメモ。S3に画像をアップロードするときに使った。

やること

ファイルを選択して読み込み、読み込んだ画像を指定のURLにアップロードしたい。

ここではjQueryを使う。

サンプル

画面

上図のように、ファイルを選択して、右隣の雑なボタンをクリックするとファイルがアップロードされるようなものを書く。

以下のように。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
	var file;

	$("#upfile").change(function(){
		console.log("upload file");
		if (this.files.length > 0) {
			file = this.files[0];
		}
	});

	$("#button").click(function(){
		console.log("button");
		var filetype = file["type"];
		var imgurl = "アップロード先のURL";
		$.ajax({
			type: "PUT",
			url: imgurl,
			data: file,
			headers:{
				"Content-Type":filetype
			},
		    processData: false,
		    contentType: false
		})
		.done(function(json_data) {
			console.log("success");
		})
		.fail(function() {
			alert("error");
		});
	});
});
</script>
</head>
<body>
	<input type="file" name="upfile" id="upfile" accept="image/*">
	<input type="button" name="button" id="button">
</body>
</html>

ファイルを選択すると、$("#upfile").change();が発火してファイルの内容をfileに読み込む(.click();にするとファイルを読み込む前に終わる…言われてみれば当たり前か…)。buttonを押すと、$("#button").click();が発火して$.ajac();によってアップロード先のURLにPUTする。

processDataおよびcontentTypeはmimeタイプの指定のため（参考「$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO」）。