วิธีดึงข้อมูลจาก input file ภาษา HTML ด้วย jQuery

<input type="file" id="my_file">

กรณีมี input file ตามด้านบน หากต้องการเขียนโปรแกรมเพื่อดึงข้อมูลไฟล์ที่ผู้ใช้งานเลือกด้วย jQuery สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง

<input type="file" id="my_file">
<script>
    $("#my_file").on("change", function (e) {
        var file = $(this)[0].files[0];
    });
</script>

โปรแกรมด้านบนมีการใช้คำสั่ง .on("change") กับ id my_file กล่าวคือ เมื่อผู้ใช้งานเลือกไฟล์ (มีการเปลี่ยนแปลง) เกิดขึ้นโปรแกรมจะเข้าทำงานในส่วนของ function ดังกล่าว ซึ่งมีการสร้างตัวแปร file เพื่อดึงค่าจาก id my_file ผ่าน $(this)[0].files[0] กรณีต้องการนำข้อมูลไฟล์ไปใช้งาน สามารถนำตัวแปร file ไปใช้งานได้เลย

ตัวอย่าง กรณีต้องการส่งไฟล์ผ่าน AJAX

<input type="file" id="my_file">
<script>
    $("#my_file").on("change", function (e) {
        var file = $(this)[0].files[0];
        var formData = new FormData(); 
        formData.append('file_data', file);
    });
</script>

กรณีถ้าต้องการส่งข้อมูลไฟล์ผ่าน AJAX เพื่อไปให้ภาษา Server Site Script ทำงาน สามารถใช้ตัวแปรชนิด FormData ได้ ซึ่งจะมีการเก็บข้อมูลในรูปแบบของ key/value จากตัวอย่าง ตัวแปร file จะถูกเก็บในตัวแปร formData โดยใช้ชื่อว่า file_data