ใช้ jQuery upload file ชิวๆหน้าจอไม่ Refresh

ก่อนหน้านี้ได้เขียนบทความเรื่องการ submit form แบบ ajax ไปแล้ว
และเนื่องจากว่าเนื้อหายังไม่ได้ครอบคลุมเรื่องการ upload file
ก็เลยแยกออกมาเป็นอีกบทความนึง เพราะมีความแตกต่างกันทางด้านเทคนิคอยู่ เช่น รูปแบบของ data และการ process เป็นต้น
ส่วนด้านการ coding นั้น ยังคงความง่ายเหมือนเดิม สั่งเพิ่มเติมแค่เล็กน้อย ลองไปดูกันเลยครับ

 

ดาวน์โหลด jQuery

– jQuery 3.1.1 (ดาวน์โหลด)

 

เว็บไซต์ตัวอย่าง

 

ไฟล์ submit_upload_file.php

การทำงาน
– ทำงานกับ request ที่เป็น post เท่านั้น
– อัพโหลดไฟล์ที่ผู้ใช้ระบุไปไว้ในโฟลเดอร์ “files” ในโปรเจ็ค
– ส่งผลลัพธ์กลับไปให้ผู้ที่ request เข้ามา

 

ไฟล์ upload_file.html

การทำงาน
– แสดงหน้าจอให้ใช้งาน
– เมื่อผู้ใช้ระบุ inputFile เข้ามาและกดปุ่ม Upload จะทำการ submit แบบ ajax ไปที่ไฟล์ submit_upload_file.php
– alert แสดงผลลัพธ์ที่ได้จากการ upload file

 

ผลลัพธ์

เมื่ออัพโหลดไฟล์สำเร็จ จะได้ผลลัพธ์ดังรูป

 

ตรวจสอบไฟล์

ไฟล์ที่อัพโหลดจะถูกเก็บไว้ในโฟลเดอร์ “files” ที่อยู่ใน root path ของโปรเจ็คดังรูป

One thought on “ใช้ jQuery upload file ชิวๆหน้าจอไม่ Refresh

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisment ad adsense adlogger