„Input Typ file.files” selektor nie działa w jQuery

Question

Próbuję uzyskać informacje o pliku są przesyłane w danych wejściowych HTML z następującego kodu:

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

Ale to nie działa, a na konsoli: $("#my_file").files is undefined

Answer 1

$("#my_file") jest obiektem jQuery i jQuery obiekt nie posiada własności files ...

Aby uzyskać elementu DOM z jQuery, zrobić

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

---

Jako dodatkowa uwaga, jeśli nie wybrano żadnego pliku, ($("#my_file"))[0].files[0] daje undefined i ($("#my_file"))[0].files[0].size rzuci błąd.
Zaleca się dodać czek ...

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

Answer 2

jQuery obiekt nie posiada files nieruchomości, można użyć metody stare getElementById lub jQuery get na wybraniu obiektu 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

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