วิธีอัพโหลดรูปภาพและบน resize แบบ AJAX โดยเน้นใช้ PHP และ jQuery ไม่ยาก

resize up image for php

หนึ่งในเครื่องมือสำคัญสำหรับคนทำเว็บไซต์ก็คือ รูปภาพ เราจะต้องมีการอัพโหลดรูปภาพลงไปในเว็บไซต์แทบจะทุกวันเพื่อให้เว็บไซต์มีความเคลื่อนไหว มีความน่าสนใจ แต่การอัพรูปภาพเราจะทำอย่างไรให้ภาพออกมาพอดีกับความต้องการ ไม่ต้องมาตกแต่งกันอีก เรามีวิธีการ พร้อมเครื่องมือมาแนะนำ

การอัพโหลดโดยใช้ php และ jQuery

วิธีการแนะนำของเราวันนี้ก็คือ การอัพโหลดรูปภาพด้วยเครื่องมือสองแบบก็คือ php และ jQuery ทั้งสองตัวมาทำงานประสานกันเพื่อให้การอัพโหลดรูปภาพ สองเครื่องมือนี้อาจจะดูเหมือนแตกต่างกันคนละทิศคนละทางแต่พอหยิบมาทำงานรวมกันแล้วปรากฏว่าได้ผลดีเลยนำมาบอกต่อกัน มันดียังไง

ข้อดีของการใช้วิธีนี้

คนที่ทำเว็บไซต์อาจจะมีแนวทาง โค้ดสั่งการ ชุคคำสั่งในการอัพโหลดภาพมากมาย แต่ทำไมเราถึงแนะนำวิธีนี้ข้อดีอย่างแรกของคู่นี้เลยก็คือ จะทำให้การทำงานอัพโหลดรูปภาพของเราเร็วขึ้นมา สองเวลาอัพโหลดภาพลงไม่ไม่ต้องรีเฟรชหน้าจออีกครั้งเพื่อแสดงผล (อัพแล้วเห็นเลยว่างั้น) สามการถ่ายโอนข้อมูลเพื่ออัพโหลดรูปภาพใช้ข้อมูลน้อยกว่า

วิธีการใช้เครื่องมือ

มาดูการใช้เครื่องมือตัวนี้กันบ้างดีกว่า ต้องบอกว่าไม่ยากอย่างที่คิด ก่อนอื่นเราต้องเตรียมความพร้อมกันก่อนดังนี้ หนึ่งสร้างไฟล์ index.php สำหรับทำหน้าที่แสดงหน้าจออัพโหลดผ่าน Ajax สองสร้างไฟล์ processupload.php เพื่อทำหน้าที่อัพโหลดรูปภาพ อันนี้สำคัญมากเนื่องจากภาษา php จะทำหน้าที่ตั้งค่าว่าเราต้องการอัพโหลดรูปภาพให้ออกมามีขนาดเท่าไร เป็นแบบไหนรวมถึงกำหนดส่วนที่เก็บรูปภาพด้วย สามสร้างโฟลเดอร์ขึ้นมา ชื่อว่า uploads เพื่อทำหน้าที่เป็นสโตร์เก็บรูปภาพที่อัพโหลดไว้ และสดท้ายโฟลเดอร์ js/images/style สำหรับเก็บไฟล์งานภาพที่จะใช้งานกับ jQuery.form

เตรียมพร้อมเสร็จแล้วก็หาโค้ด

เมื่อเราเตรียมความพร้อมด้านบนเสร็จแล้ว ก็มาถึงขั้นตอนการใส่โค้ดลงไปแต่ละส่วน แนะนำว่าการใส่โค้ดนั้นไม่ได้ยากเนื่อจากเราไม่ได้ให้เพื่อนๆ มาคิดเขียนโค้ดเองทั้ง 0 แต่เราแนะนำว่าให้ไปก็อปปี้โค้ดมาได้เลย เริ่มจากไฟล์ index.php ก็ไปเอาโค้ดข้อมูลมาใส่ได้เลย พอใส่แล้วจะทำให้เกิดหน้าต่างสำหรับอัพโหลดรูปภาพขึ้นมา ชื่อว่า Ajax image uploader จากนั้นเราก็ใส่โค้ดไปเรื่อยๆ จนถึงการจัดการไฟล์ processupload.php ตรงนี้พอนำโค้ดไปใส่แล้ว สังเกตนิดหนึ่งตรงคำว่า configuration จะเป็นการกำหนดขนาดของภาพที่ต้องการจะอัพโหลดลงไป เราสามารถเลือกได้ด้วยว่าอยากได้ขนาดเท่าไร กับ คุณภาพของภาพ เมื่อเลือกได้แล้วเท่านี้ก็เป็นอันเรียบร้อย เราจะมีเครื่องมือในการอัพโหลดภาพขึ้นเว็บไซต์ได้อย่างใจต้องการ เร็ว ไม่ต้องมาปรับแต่งอะไรอีก

1 thought on “วิธีอัพโหลดรูปภาพและบน resize แบบ AJAX โดยเน้นใช้ PHP และ jQuery ไม่ยาก”

  1. เป็นแนวทางใหม่ สำหรับการอัพรูปสำหรับผมเลย เป็นวิธีที่เร็ว เว็บบาคาร่าออนไลน์ มันแสดงภาพโดยไม่ต้องรอรูปภาพโหลด ทำได้ดี php และ jQuery มีการถ่ายโอนรวดเร็ว ข้อมูลน้อย แต่ข้อเสีย คือต้องโหลดมาใช้งานนั้นเอง นับว่าทุกคนควรหามาลองใช้กัน 

Comments are closed.