javascript - 「入力タイプfile.files」セレクターがjQueryで機能しない

Question

次のコードを使用して、HTML入力でアップロードされているファイルに関する情報を取得しようとしています。

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = $("#my_file").files[0].size;
    alert(file_size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>

しかし、それは機能せず、コンソールは次のように戻ります。$("#my_file").files is undefined

Answer 1

$("#my_file")はjQueryオブジェクトであり、jQueryオブジェクトにはプロパティがありませんfiles...

jQueryからDOM要素を取得するには、次のようにします。

$("#my_file")[0].files[0].size

---

補足として、ファイルを選択していない場合は、が表示され、($("#my_file"))[0].files[0]エラーundefinedが($("#my_file"))[0].files[0].sizeスローされます。
チェックを追加することをお勧めします...

if ($("#my_file")[0].files.length > 0) {
    file_size = $("#my_file")[0].files[0].size
} else {
    // no file chosen!
}

Answer 2

jQueryオブジェクトにはプロパティがありませんfiles。古いメソッドgetElementByIdまたはjQuerygetメソッドを使用してDOM要素オブジェクトを選択できます。

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = document.getElementById("my_file").files[0].size;
    alert(file_size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>

Answer 3

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = document.getElementById("my_file").files[0].size;
    alert(file_size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>