Skip to main content

Javascript Preview Image File and Save with php MySQL

สวัสดีครับ สำหรับบทความในวันที่ ผู้เขียนจะขอแนะนำเทคนิคการ Preview รูปภาพตัวอย่าง ก่อนการ Upload ด้วย

Javascript บันทึกไฟล์ภาพไว้ใน Folder และ Path ของไฟล์เก็บไว้ใน DataBase MySQL

มาเริ่มกันเลย

1.กำหนด Style ของ Css กันก่อน เป็นการกำหนดให้แสดงผลปุ่มอยู่ตรงกลางหน้าจอ

2.เพิ่ม input สำหรับ upload ไฟล์ ดังนี้  โดยใน input จะมีการเรียกใช้ฟังชั่น preview(event); เพื่อแสดงผลรูปภาพ

3.เพิ่ม คำสั่ง javascript ดังนี้ ในส่วนนี้เป็นการแสดงข้อมูลรูปภาพตัวอย่าง และ บันทึกไฟล์ไปที่ upload.php

4.สร้าง Folder php และ สร้างไฟล์ upload.php

โดยในไฟล์นี้จะเป็นการ upload file ไปไว้ใน Folder files จากนั้นจะนำ imgPath ไป Save ใน Database

ผลการทำงาน

– เมื่อคลิกที่ปุ่ม UPLOAD IMAGE FILE  และ เลือกไฟล์ จะมีการแสดงภาพตัวอย่างดังภาพ

จากนั้นจะมีการบันทึก path ของไฟล์ภาพลงใน database ครับตัวอย่าง code ทั้งหมดแบบเต็ม ๆ

ตัวอย่าง Source Code

ขอบคุณที่เข้าชม หวังว่าจะเป็นประโยชน์ต่อผู้อ่านทุกท่านนะครับ