16

I'm trying to get information about the file being uploaded in an HTML input with the following code: 

$(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>

But it doesn't work, and the console returns: $("#my_file").files is undefined

4

3 回答 3

54

$("#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!
}
于 2013-02-08T12:41:35.967 回答
6

jQuery 对象没有files属性，您可以使用旧的getElementById或 jQueryget方法来选择 DOM Element 对象。

$(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>

于 2013-02-08T12:42:15.033 回答
-5 

$(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>

于 2017-07-03T08:58:51.243 回答