画像を選択して、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」）。
参考
関連コンテンツ
関連記事
その他プログラミング言語 の記事
- [2019年1月10日] JavaScriptのrepeat()のポリフィルを読む
- [2018年12月27日] iOSデバイスだけブラウザバックでキャッシュを利用されて困った、しかもサーバー側の環境によって異なる
- [2018年9月19日] 改行コードをbrタグにして反映したいがhtmlエスケープもしたい時
- [2018年9月11日] JavaScriptのプログラムに渡す時刻の文字列の形式は何が良いか
- [2018年9月7日] 大文字小文字区切り、ハイフン区切り、アンダースコア区切り
- ---本記事---
- [2018年7月4日] eclipseで進行中のプロジェクトをbitbucketで管理したい
- [2018年6月28日] FESSで検索ないし更新のエイリアスを別のインデックスを付け替える
- [2018年6月10日] Chromeのスーパーリロードで変更が反映されずに詰まったこと
- [2018年5月30日] FESSでラベルなしクローラを混ぜたスケジューラを動かしたら検索結果が変になったメモ
- [2017年11月20日] Tabbed Appでstoryboardから3つ目のタブを作る手順のメモ
スポンサーリンク