画像を選択して、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」）。
参考
関連コンテンツ
関連記事
その他プログラミング言語 の記事
- [2018年9月19日] 改行コードをbrタグにして反映したいがhtmlエスケープもしたい時
- [2018年9月11日] JavaScriptのプログラムに渡す時刻の文字列の形式は何が良いか
- ---本記事---
- [2017年11月20日] Tabbed Appでstoryboardから3つ目のタブを作る手順のメモ
- [2017年1月28日] MacのHomebrewでimagemagickを入れているとgem install rmagickが失敗するようになったメモ
- [2016年11月11日] AndroidでFFTはJTransformsが楽だった
- [2016年11月8日] Androidアプリ開発：3.5mmイヤホン端子からマイク録音（ライン録音）
- [2016年11月7日] Androidアプリ開発：録音と再生
- [2013年5月24日] ruby-openglで英数字の文字列を描画
スポンサーリンク