"Eingangstyp file.files" Selektor funktioniert nicht in jQuery

Question

Ich versuche, Informationen über die Datei in einem HTML-Eingang mit dem folgenden Code hochgeladen werden zu bekommen:

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

Aber es funktioniert nicht, und die Konsole kehrt: $("#my_file").files is undefined

Answer 1

$("#my_file") ist ein jQuery-Objekt, und ein jQuery-Objekt nicht über eine Eigenschaft files ...

Um das DOM-Element aus jQuery zu bekommen, tun

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

---

Als zusätzliche Anmerkung, wenn Sie eine Datei ausgewählt haben, ($("#my_file"))[0].files[0] gibt Ihnen undefined und ($("#my_file"))[0].files[0].size werden Fehler werfen.
Es wird empfohlen, einen Scheck hinzufügen ...

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

Answer 2

jQuery-Objekt nicht files Eigenschaft hat, können Sie die alte getElementById oder jQuery get Verfahren zur Auswahl des DOM Element-Objekt verwenden können.

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