[JS] วิธีการส่งไฟล์และข้อมูลจากฟอร์มโดยไม่ใช้การส่งค่าจากฟอร์ม [JS] How to Send File with Form Data without Form Submission

jQuery และ Ajax ถูกใช้อัพโหลดไฟล์จากฟอร์ม HTML ไปยังเซิร์ฟเวอร์โดยไม่ใช้การส่งค่าจากฟอร์ม
jQuery and Ajax is used to upload file from HTML form to server without form submission

สมมติว่า ฟอร์ม HTML เป็นตามด้านล่าง
Assume that HTML form is below

<form id="form-id" action="upload.php" enctype="multipart/form-data" method="post">
     <table style="width: 100%;">
          <tbody>
               <tr>
                    <th><label for="id_path_program">Path program:</label></th>
                    <td><input id="id_path_program" name="path_program" type="file"></td>
               </tr>
               <tr>
                    <th><label for="id_description">Description:</label></th>
                    <td><input id="id_description" maxlength="250" name="description" type="text"></td>
               </tr>
          </tbody>
     </table>
     <input type="submit" value="Upload"/>
</form>

หมายเหตุ: id ของฟอร์มถูกตั้งค่าเป็น form-id และ action ของฟอร์มเป็น upload.php

Notice: id of form is set to form-id and action of form is upload.php

เพื่อที่จะอัพโหลดไฟล์และข้อมูลที่กรอกภายในฟอร์ม ใช้สริปต์ตามด้านล่าง
To upload file with form data, use java script below

$('#form-id').submit(function(){
     $.ajax({
          url: $(this).attr('action'),
          type: 'POST',
          data: new FormData($(this)[0]),
          dataType : 'json',
          contentType: false,
          processData: false,
          success : function(data){
               console.log(data)
          }
     });   
     return false;
});

บรรทัดที่ 1, เลือกฟอร์มที่มี id เป็น form-id แล้วตั้งค่า event handler สำหรับการส่งค่าของฟอร์ม

On line 1, select a form which id is equal to form-id then set event handler for form submitting

บรรทัดที่ 3, ตั้งค่า URL ที่จะส่งค่าไป โดยอ่านค่าจากแอตทริบิวต์ action ของฟอร์มที่ถูกเลือก

On line 3, set URL, which send data to, by getting value of attribute named action of selected form

บรรทัดที่ 4, ตั้งค่าประเภทการส่งข้อมูล

On line 4, set type of sending data

บรรทัดที่ 5, ตั้งค่าข้อมูลที่จะส่ง โดยอ่านค่าข้อมูลของฟอร์มที่ถูกเลือก

On line 5, set data, which will be send, by getting form data of selected form

บรรทัดที่ 6, ตั้งค่าประเภทข้อมูลที่จะรับจากเซิร์ฟเวอร์

On line 6, set expected return type from server

บรรทัดที่ 7-8, ตั้งค่าทั้ง contentType และ processData เป็น false

On line 7-8, set both contentType and processData value to false

บรรทัดที่ 9-11, ตั้งค่าฟังก์ชั่นเรียกกลับสำหรับรับค่าจากเซิร์ฟเวอร์ เมื่อส่งข้อมูลไปเซิร์ฟเวอร์สำเร็จ

On line 9-11, set callback function for receiving data from server when sending data to server successfully

บรรทัดที่ 13, คืนค่า false เพื่อยกเลิกการส่งค่าจากฟอร์ม

On line 13, return false to cancel form submission

ข้อสำคัญ: ห้ามลบ contentType และ processData ออก

Importance: contentType and processData must not be removed

หมายเหตุ: ก่อนการใช้ $.ajax ผมลองใช้ $.post แต่ไม่สามารถส่ง FILES ไปยังเซิร์ฟเวอร์ได้

Notice: Before using $.ajax, I try to use $.post but FILES cannot be send to server