ส่งข้อมูลไฟล์รูปภาพผ่าน jQuery ไป PHP ทำอย่างไร

กรณีมีการเขียนโปรแกรมให้ผู้ใช้งานเลือกไฟล์รูปภาพผ่าน input file ของ HTML และต้องการส่งไฟล์ดังกล่าวผ่าน jQuery ไปให้ PHP ทำงานต่อสามารถทำได้ โดยแบ่งการทำงานออกเป็น 3 ส่วน สมมุติให้ input file ของภาษา HTML เป็นดังนี้

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

1. รับข้อมูลไฟล์รูปภาพจาก input file ของ HTML และสร้างตัวแปร JavaScript มารับข้อมูลรูปภาพ

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

2. ส่งไฟล์รูปภาพด้วย jQuery ผ่านคำสั่ง ajax

<script>
    $("#file_upload").on("change", function (e) {
        var file = $(this)[0].files[0];
        var formData = new FormData();  
        formData.append('file', file);
        $.ajax({
            type: "POST",
            url: "upload_file.php",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,                
            success: function(res) {
                // ตัวแปร res รับค่าจากการทำงานของไฟล์ php
            }
        });           
    });
</script>

3. รับข้อมูลไฟล์รูปภาพที่ภาษา PHP ไฟล์ชื่อ upload_file.php

<?php
    isset( $_FILES['file']['tmp_name'] ) ? $file_tmp_name = $_FILES['file']['tmp_name'] : $file_tmp_name = "";
    isset( $_FILES['file']['name'] ) ? $file_name = $_FILES['file']['name'] : $file_name = "";

    if( !empty( $file_tmp_name ) && !empty( $file_name ) ) {
        // นำไปอัปโหลด หรือ ทำงานต่อ
    }
?>