概要
type=file のオブジェクトを取得して size 属性を参照すれば OK です
環境
- macOS 11.6.4
サンプルコード
<!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() {
// Fetch file size
let file = $('#upload_file').prop('files')[0];
// 3MiB
let max = 3 * 1024 * 1024
if (file.size > max) {
$('#result').text("File size must be 3mib or less.")
} else {
let fd = new FormData();
fd.append("file", file);
$.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>
今回は先頭の1ファイルのみをチェックしているので複数のファイルがある場合はすべてチェックしてください
念の為サーバ側でも同じようなファイルチェックするロジックを実装しておきましょう
0 件のコメント:
コメントを投稿