“输入型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 ...

要获得DOM元素出来的jQuery的，做

($("#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或jQuery的get方法选择的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>