การอัพโหลดรูปภาพและ resize แบบ AJAX โดยใช้ PHP และ jQuery

ปัจจุบันการอัพโหลดไฟล์รูปภาพและ resize ขนาดรูปภาพ มี code ดาวน์โหลดให้เลือกใช้งานมากมายแต่บทความในบทความนี้ผมแนะนำการอัพโหลดไฟล์รูปภาพแบบ AJAX โดยใช้ PHP และ ใช้ jQuery เป็นเครื่องมือในการอัพโหลดรูปภาพซึ่งการอัพโหลดรูปภาพแบบ AJAX นั้นมีจุดเด่นคือไม่ต้อง Refresh หน้าเว็บเพจจึงทำให้การอัพโหลดมีความรวดเร็วและใช้ Data Transfer น้อยลง โดยผมจะใช้เทคนิค HTML5 File API ในการตรวจสอบขนาดไฟล์และประเภทของไฟล์ก่อนที่จะอัพโหลดจากนั้นผมจะสร้างไฟล์รูปภาพ 2 ไฟล์ คือไฟล์รูปภาพ Original และ รูปภาพแบบปรับขนาดแล้ว สำหรับบทความนี้เน้นการใช้งานพื้นฐานและง่ายต่อการเรียนรู้และเข้าใจ

รูปภาพโครงสร้างโฟล์เดอร์และไฟล์ ในบทความนี้ ผมสร้างโปรเจ็คชื่อว่า ajaxuploadimg จะเห็นได้ว่าไฟล์ที่จำเป็นต้องใช้งานมีดังนี้
1. ไฟล์ index.php ทำหน้าที่แสดงหน้าจออัพโหลดและส่งข้อมูลอัพโหลดผ่าน AJAX
2. ไฟล์ processupload.php ทำหน้าอัพโหลดรูปภาพโดยใช้ภาษา PHP คุณสามารถตั้งค่าการอัพโหลดได้ที่ไฟล์นี้ เช่นกำหนดขนาดรูปภาพ กำหนดพาธที่เก็บรูปภาพ
3. โฟล์เดอร์ uploads ทำหน้าที่เก็บรูปภาพที่อัพโหลด
4. โฟล์เดอร์ js/images/style เก็บไฟล์ที่จำเป็นต้องเรียกใช้งานเช่น jquery.form เป็นต้น

โดยไฟล์เหล่านี้สามารถดาวน์โหลดได้ที่ด้านล่างบทความ
ajaxuploadimage-01

1. สร้างฟอร์ม Upload รูปภาพ ให้คุณสร้างไฟล์ index.php ขึ้นมาแล้วนำ Code นี้ไปใส่ภายใน Tag <Body>

ผลลัพธ์
ajaxuploadimage-02

2. ในบทความนี้มีการเรียกใช้งาน jQuery เพื่อให้การสร้าง code ง่ายขึ้นโดยปลักอิน jQuery ทำหน้าที่ในการสร้าง AJAX upload เมื่อมีการคลิกปุ่ม Upload (พร้อมกับการตรวจสอบไฟล์รูปภาพ)
ให้คุณนำ code นี้ไปใส่ในส่วนของ <head> ในไฟล์ index.php

และไฟล์ index.php มี code เป็นดังนี้

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

ผลลัพธ์
ajaxuploadimage-03

สำหรับลิงค์ดาวน์โหลดไฟล์ทั้งหมด สามารถดาวน์โหลดได้ที่นี้ คลิกที่นี้เพื่อดาวน์โหลด

สำหรับบทความนี้ก็จบแล้วสำหรับเรื่อง การอัพโหลดโดยใช้ PHP และ AJAX และขอบคุณสำหรับผู้พัฒนา Code ที่เว็บ http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php

หากใครมีข้อสงสัยหรือคำถามสามารถเขียนคำถามไว้ใน Comment ได้เลยครับ

You May Also Like

About the Author: Onmobile

โปรแกรมเมอร์
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
moonato
moonato
8 years ago

ถ้าเราจะอัพรูปที่มีขนาดมากกว่่า 2 MB ๖้องทำอย่างไรอะครับ

Somjai
8 years ago

ถ้าอยากให้อัพโหลดได้หลายๆภาพแบบสามารถเลือก select ภาพติ๊กภาพที่ต้องการทำใงครับ