"Input loại file.files" chọn không làm việc trong jQuery

Question

Tôi đang cố gắng để có được thông tin về các tập tin được tải lên ở một đầu vào HTML với đoạn mã sau:

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

Nhưng nó không hoạt động và bàn điều khiển trả về: $("#my_file").files is undefined

Answer 1

$("#my_file") là một đối tượng jQuery và đối tượng jQuery không có thuộc tính files ...

Để có được phần tử DOM ra khỏi jQuery, làm

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

---

Là một lưu ý thêm, nếu bạn chưa chọn bất kỳ tập tin, ($("#my_file"))[0].files[0] mang đến cho bạn undefined và ($("#my_file"))[0].files[0].size sẽ ném lỗi.
Bạn được khuyến cáo để thêm một tấm séc ...

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

Answer 2

jQuery đối tượng không có files thuộc tính, bạn có thể sử dụng cũ getElementById hoặc jQuery get phương pháp để lựa chọn đối tượng phần tử 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>