概要
前回はライブラリを使った方法を紹介しました
今回は jQuery のみを使ってファイルをアップロードする方法を紹介します
環境
- macOS 11.6.4
- Ruby 3.0.3p157
- sinatra 2.2.0
サーバ側実装
サーバ側のコードは前回と同じです
クライアント側実装
- vim views/index.erb
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Upload Test</title>
</head>
<body>
<input id="upload_file" type="file" name="file">
<button id="upload" type="button">Upload</button>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function () {
$('#upload').click(function() {
let fd = new FormData();
fd.append("file", $('#upload_file').prop('files')[0]);
$.ajax({
url:'/upload',
type:'post',
data: fd,
processData: false,
contentType: false,
cache: false,
}).done(function (data) {
$('#result').text("uploaded.")
}).fail(function() {
$('#result').text("upload failed.")
});
});
});
</script>
</body>
</html>
少し解説
jQuery でファイルを送信するには FormData + ajax を使います
ファイルは複数指定されることを想定していますが今回は1ファイルのみ指定可能にしているので先頭のファイルのみを送信します ($('#upload_file').prop('files')[0])
prop のあとの files は必ず「files」でなければなりません
あとはサーバ側でファイルを保存すれば OK です
最後に
ライブラリを使うとプログレスバーやアップロード後のコールバックメソッドが予め定義されているので便利なのは便利なのですが使わない機能もあります
本当に簡単なフォームを作成したいだけだればこれくらいでもいいかもしれません
0 件のコメント:
コメントを投稿