Question

我正在尝试使用以下代码获取有关正在上传的文件的信息：

$(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! }会抛出错误。
建议您添加支票...

{{1}}

Answer 2

jQuery对象没有files属性，您可以使用旧的getElementById或jQuery get方法来选择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>

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

“输入类型file.files”选择器在jQuery中不起作用

3 个答案: