Devdit
 

อัปโหลดรูปภาพแบบเรียลไทม์ PHP และ jQuery

2.1K

บทความนี้สอนวิธีการเขียนโปรแกรมอัปโหลดรูปภาพแบบเรียลไทม์ด้วยภาษา PHP และ jQuery โดยจะประกอบด้วย 2 ไฟล์ คือ index.php ทำหน้าที่รับไฟล์รูปภาพที่ผู้ใช้งานเลือก และส่งต่อให้ jQuery ทำงาน และอีกไฟล์ คือ upload.php ทำหน้าที่อัปโหลดไฟล์รูปภาพเข้า Server โดยใช้ภาษา PHP สามารถเขียนโปรแกรมได้ดังนี้ 

 

ตัวอย่าง ไฟล์ index.php

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 
</head>
<body>

<input type="file" id="file" accept="image/png, image/gif, image/jpeg">
<br/><br/>
<div id="response"></div>

<script>
    $("#file").on("change", function (e) {
        var file = $(this)[0].files[0];
        var form_data = new FormData(); 
        form_data.append('file', file);
        $.ajax({
            type: "POST",
            url: "upload.php",
            data: form_data,
            cache: false,
            contentType: false,
            processData: false,                
            success: function(response) {
                $("#response").html(response);
            }
        });
    });
</script>

</body>
</html>

โปรแกรมด้านบนมีส่วนประกอบที่สำคัญ 4 ส่วน คือ

1. ติดตั้ง jQuery แบบ CDN

2. ปุ่มเลือกไฟล์ มีค่า id = file ซึ่ง id นี้จะถูกนำไปใช้อ้างอิงใน jQuery

3. ส่วน jQuery เมื่อผู้ใช้งานเลือกรูปภาพจะเข้ามาทำงานด้วยคำสั่ง .on("change") ของ id file ในข้อ 2. จากนั้นข้อมูลรูปภาพจะถูกส่งผ่านคำสั่ง ajax ไปที่ไฟล์ upload.php และรับค่ากลับมาที่ตัวแปรชื่อ response

4. ตัวแปร response จะรับค่ากลับมาจากไฟล์ upload.php และแสดงที่ div id = response

 

ตัวอย่าง ไฟล์ upload.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 ) ) {
        $file_name = $_FILES['file']['name'];
        if( move_uploaded_file( $file_tmp_name, $file_name )) {
            echo "<img src='{$file_name}' />";
        }
    }

?>

ไฟล์ upload.php จะมีการรับค่า 2 อย่าง คือ ตำแหน่งของรูปภาพ และชื่อไฟล์ภาพที่ถูกเลือกมา จากนั้นรูปภาพจะถูกอัปโหลดเข้า Server ด้วยคำสั่ง move_uploaded_file เมื่ออัปโหลดรูปภาพเสร็จแล้วจะแสดงรูปภาพด้วยคำสั่ง echo ซึ่งจะถูกส่งมาให้ตัวแปร JavaScript ชื่อ response ในไฟล์ index.php แสดงผ่าน div id = response

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ