วิธีเขียน PHP อัปโหลดไฟล์ Realtime
บทความนี้สอนเขียนโปรแกรมภาษา PHP สำหรับอัปโหลดไฟล์ หรือรูปภาพ แบบ Realtime โดยใช้ภาษา JavaScript ด้วยคำสั่ง ajax พร้อมแทบรอการอัปโหลดไฟล์ด้วยแท็ก progress โดยการอัปโหลดไฟล์แบบ Realtime จะช่วยเพิ่มประสบการณ์การใช้งานของผู้ใช้ให้ดียิ่งขึ้น โดยมีรายละเอียดการเขียนโปรแกรมดังนี้
ตัวอย่าง PHP อัปโหลดไฟล์ Realtime
1. เริ่มจากสร้างฟอร์มอัปโหลดด้วยภาษา HTML ประกอบด้วยปุ่มเลือกไฟล์ (input file), ปุ่มอัปโหลด (input button) และแทบรอโหลด (progress)
<div>
<input type="file" name="file" id="file">
<div>
<input type="button" value="Upload" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100"></progress>
</div>
</div>เมื่อผู้ใช้งานสามารถกดเลือกไฟล์ หรือรูปภาพจากปุ่ม โปรแกรมจะเรียกใช้ฟังก์ชัน uploadFile ที่ JavaScript
2. เขียนโค้ด javascript อัปโหลดไฟล์ Realtime ด้วยภาษา JavaScript
<script>
function uploadFile(){
var file = document.getElementById("file").files[0];
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function progressHandler(event){
document.getElementById("progressBar").value = (event.loaded / event.total) * 100;
}
</script>โค้ดนี้ประกอบด้วย 2 ฟังก์ชันทำหน้าที่ดังนี้
2.1. uploadFile คือฟังก์ชันเมื่อผู้ใช้งานกดเลือกไฟล์ การทำงานคือจะดึงข้อมูลของไฟล์ที่เลือกเก็บไว้ที่ตัวแปร formdata จากนั้นใช้คำสั่ง ajax เพื่อส่งข้อมูลแบบ POST ไปที่ไฟล์ upload.php พร้อมแสดงแทบการรออัปโหลดด้วย progress โดยเรียกใช้ฟังก์ชันที่ 2 คือ progressHandler
2.2. progressHandler คือฟังก์ชันที่จะอ้างถึง element id เท่ากับ progressBar และกำหนดแทบการรออัปโหลดไฟล์
3. สร้างไฟล์ PHP เพื่อทำหน้าที่อัปโหลดไฟล์ที่ผู้ใช้งานเลือกไปเก็บไว้ใน Server
<?php
if(isset($_FILES['file'])){
$file_name = $_FILES['file']['name'];
$file_tmp = $_FILES['file']['tmp_name'];
move_uploaded_file( $file_tmp, "images/".$file_name );
}
?>อย่างแรกให้สร้าง folder ชื่อ images เพื่อรองรับการอัปโหลดไฟล์ก่อน โดยโค้ดนี้จะรับไฟล์ภาพด้วย $_FILES['file'] โดยดึง tmp_name และ name ออกมาเพื่อใช้สำหรับการอัปโหลดไฟล์ร่วมกับคำสั่ง move_uploaded_file กรณีโปรแกรมทำงานได้ถูกต้องเมื่ออัปโหลดไฟล์แล้ว จะพบว่ามีไฟล์ดังกล่าวอยู่ใน folder ที่ชื่อ images
