2022年3月14日月曜日

jQuery でファイルのサイズを取得する方法

jQuery でファイルのサイズを取得する方法

概要

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 件のコメント:

コメントを投稿