[最終更新] 2021年7月25日
画像を選択して、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」）。
参考
関連記事
JavaScript の記事
- [2021年7月24日] vue.jsを勉強する
- [2020年12月10日] Node.js 6 + http + Promise で複数のAPIを直列で順次実行する
- [2019年1月10日] JavaScriptのrepeat()のポリフィルを読む
- [2018年9月19日] 改行コードをbrタグにして反映したいがhtmlエスケープもしたい時
- [2018年9月11日] JavaScriptのプログラムに渡す時刻の文字列の形式は何が良いか
- ---本記事---
スポンサーリンク