อัปโหลดรูปภาพแบบเรียลไทม์ PHP และ jQuery
บทความนี้สอนวิธีการเขียนโปรแกรมอัปโหลดรูปภาพแบบเรียลไทม์ด้วยภาษา 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
