javascript - 使用 javascript 上传之前获取文件大小

Question

这是 html 代码:

<form method="POST" action="http://my-site.com/send-file" accept-charset="UTF-8" enctype="multipart/form-data">
      <input name="_token" type="hidden" value="6Yav0H6Cyp62Rhr6uAAEefzL7Yq0BqIHfhuYwzy4"> 
      <label for="file">File</label>
      <input id="iefile" name="img" type="file">
      <input type="submit" value="send">
</form>

这是js代码:

 $('form').submit(function(e) { // capture submit
        e.preventDefault();
        size=$(this).find("input:file").files[0].size ;
        alert(size);
}

但在控制台中显示此错误:

Uncaught TypeError: Cannot read property '0' of undefined

Answer 1

要检索 DOM 元素的属性，您应该使用 .prop():

$(this).find("input:file").prop('files')[0].size

这是因为 $(this).find() 返回一个 jQuery 对象，而不是直接返回 DOM 元素。或者，您可以将结果视为数组并使用第一个元素，如下所示:

$(this).find("input:file")[0].files[0].size

如mentioned在评论中，您还应该确保首先选择一个文件:

var f = $(this).find("input:file")[0].files[0];
if (f) {
    // do something with f.size
}