ในการพัฒนา Web Application ทุกวันนี้เรามักจะส่งข้อมูลให้ Server ด้วยวิธี Ajax การ Upload File ขึ้นสู่ Server ก็เช่นกัน เราสามารถ Upload ไฟล์แบบ Ajax โดยแสดงสถานะการ Uplaod เป็นเปอร์เซ็นได้โดยไม่ต้องใช้ Framework ใดๆ โดยใช้แค่ javascript เพียงอย่างเดียวดังนี้
<html>
<body>
<input type="file" id="upload-file" /><!--สร้าง input สำหรับ upload ไฟล์ -->
<button id="upload-button">Upload</button><!--สร้างปุ่ม Upload-->
<div id="upload-percentage"></div><!--สร้าง div แสดงสถานะการ Upload-->
<script>
//------กำหนดชุดคำสั่งเมื่อคลิกปุ่ม Upload---------
document.querySelector('#upload-button').addEventListener('click', function() {
//-----สร้าง Object เก็บข้อมูลที่จะส่งไปที่ server
var data = new FormData();
//----เพิ่มไฟล์ที่ต้องการ Upload ลงใน Object ที่จะส่งไปที่ Server
data.append('file', document.querySelector('#upload-file').files[0]);
//----สร้าง Object สำหรับส่งข้อมูลแบบ Ajax----
var request = new XMLHttpRequest();
//------กำหนดชุดคำสั่งเมื่อทำ Upload ไฟล์เสร็จแล้ว
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//----แสดง Text ข้อความที่ส่งกลับมาจาก Server
document.querySelector("#upload-percentage").innerHTML = request.responseText;
}
};
//--------คำนวนเปอร์เซ็นที่ Upload เสร็จแล้ว-------
request.upload.addEventListener('progress', function(e) {
var percent_complete = (e.loaded / e.total)*100;
document.querySelector("#upload-percentage").innerHTML = percent_complete+"%";
});
//------กำหนดให้ส่งไฟล์แบบ POST ไปที่ไฟล์ upload.php
request.open('post', 'upload.php');
request.send(data);
});
</script>
</body>
</html>
ฝั่ง Server ใช้ PHP ดังนี้
<?php
$file=$_FILES["file"];//รับไฟล์จาก Client Browser
copy($file["tmp_name"],$file["name"]);
echo "Upload File Success";//ส่งข้อความกลับ
?>