เปลี่ยนการอัพโหลดไฟล์ให้ดูดีสวย ๆ ด้วย uploadify ตอนที่ 1


หน้าแรก PHP MySQL เกร็ดความรู้ เปลี่ยนการอัพโหลดไฟล์ให้ดูดีสวย ๆ ด้วย uploadify ตอนที่ 1
Uploadify เป็นปลั๊กอินของ javascript โดยทำงานร่วมกับ flash และ php ในฝั่ง Server โดยฟีเจอร์ให้เราใช้งานได้อย่างไม่ยากเลย ก็เปลี่ยนการอัพโหลดของคุณสวย ดูดีขึ้นมาทันตาเห็น

ขั้นแรกหากยังไม่มี Uploadify แล้วละกัน ไปดาว์นโหลดกันกันก่อน ที่นี่ จากนั้นก็นำใส่ในงานของเราเลย
จากนั้นต้อง include ไฟล์ที่จำเป็นต่อการใช้งาน uploadify เสียก่อน โดยนำไปใส่ในหน้าที่ต้องการใช้งาน



  Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">




ต่อมาทำปุ่มอัพโหลดของคุณก่อน ด้วยโค้ด html ธรรมดา โดยนำไปใส่ในหน้าที่ต้องการ


  Code
<input id="file_upload" name="file_upload" type="file"/>




เขียนเรียกใช้งาน uploadify ด้วย jquery เท่านั้นก็สามารถใช้งานได้แล้วครับ


  Code
$(function() {
$('#file_upload').uploadify({
'uploader' : 'uploadify.php'
});
});




ต่อมาต้องมาเขียน ไฟล์ที่จัดการฝั่ง Server อีกที่คือไฟล์ uploadify.php เราสามารถเปลี่ยนได้ชื่ออะไรก็ได้อันนี้แล้วแต่เรา
จากนั้นดูตัวอย่างของไฟล์จัดการการอัพโหลดไฟล์ ก็เป็นโค้ด php อย่างง่าย ๆ ครับไม่ได้ยุ่งยากอะไร ในเบื้องต้นเท่านี้ก็สามารถอัพโหลดไฟล์ได้แล้ว



  Code
<?php
// กำหนดพาทโฟลเดอร์ที่ต้องการอัพโหลดไฟล์ไปเก็บไว็
$targetFolder = 'uploads';

// ตรวจสอบค่าการส่งค่าของไฟล์ที่อัพโหลด
if (!empty($_FILES)) {

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

// ตรวจสอบประเภทของไฟล์ที่อัพโหลดมา โดยความจริงเราสามารถกำหนดให้ตรวจสอบที่ flash ก็ได้
$fileTypes = array('jpg','jpeg','gif','png'); // ประเภทไฟล์ที่ต้องการ
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo '1';
} else {
echo 'Invalid file type.';
}
}
?>




จากไฟล์ uploadify เป็นเพียงตัวอย่างการเขียนอัพโหลดไฟล์ปกติอย่างง่าย นอกนั้นแล้วเราจะเขียนให้รัดกุมและปลอดภัยมากกว่านี้ก็แล้วแต่ตามสะดวก ยกตัวอย่างมาให้เห็นเท่านั้น โดยเขียนอธิบายจากโค๊ดตัวอย่างจาก uploadify อีกที

ขึ้นไปด้านบน