"इनपुट प्रकार 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 नहीं है ...

jQuery से बाहर डोम तत्व प्राप्त करने के लिए,

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

---

कर एक अतिरिक्त नोट के रूप में, यदि आप किसी भी फाइल को नहीं चुना है, ($("#my_file"))[0].files[0] आप undefined देता है और ($("#my_file"))[0].files[0].size त्रुटि फेंक देते हैं।
आप एक चेक को जोड़ने के लिए, कर सकते हैं DOM तत्व वस्तु के चयन के लिए वर्ष getElementById या jQuery get विधि का उपयोग सिफारिश कर रहे हैं ...

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

Answer 2

jQuery वस्तु files संपत्ति नहीं है आप।

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