ลองแวะไปดูที่ http://www.zidoupload.com แล้วลองอัพโหลดไฟล์อะไรก็ได้ซักไฟล์นึง จะเห็นว่าระหว่างที่รอ มันจะมีการแสดงผลเป็นแถบว่าตอนนี้เราอัพโหลดไปแล้วกี่เปอร์เซนต์ รวมถึงยังบอกอีกว่า Transfer rate เป็นเท่าไหร่ ตรงนี้แหละครับที่ผมจะมาพูดถึงในวันนี้
การจะทำ Upload progress ด้วย PHP นั้น ส่วนประกอบที่ผมเลือกใช้จะประกอบด้วยส่วนหลัก ๆ อยู่ 3 ส่วนครับ คือ
- APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ
- Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ
- Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ
สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ
- Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ
- Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ
- Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ
Upload Form
ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น “abcd” ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)
<form enctype="multipart/form-data" action="upload.php" method="post">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd">
<input name="upfile" type="file"></span>
<input type="submit" value="Upload">
</form>
Upload
ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ
Progress
สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ
<?php
header("content-type:application/json");
$stat = apc_fetch('upload_abcd');
if ($stat)
{
if (!isset($stat["total"])) $stat["total"] = 0;
if (!isset($stat["current"])) $stat["current"] = 0;
if (!isset($stat["rate"])) $stat["rate"] = 0;
if (!isset($stat["cancel_upload"])) $stat["cancel_upload"] = 0;
if (!isset($stat["done"])) $stat["done"] = 0;
f (!isset($stat["filename"])) $stat["filename"] = "";
printf("[%0d,%0d,%0d,%0d,%0d,\"%s\"]",
$stat["total"] ,
$stat["current"] ,
$stat["rate"] ,
$stat["cancel_upload"] ,
$stat["done"],
addslashes($stat["filename"]));
}
else
{
echo "null";
}
?>
สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key “abcd” จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย “upload_” และตามด้วย key ของเรา คือ “abcd”
ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ
- total เป็นขนาดไฟล์
- current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว
- rate คือความเร็วในการอัพโหลดครับ
- filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)
คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน
บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ ดาวน์โหลด กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ http://www.zidoupload.com ครับ
โอว เยส
-*- มาอย่างไวอ่ะ
ทำว่าน่าจะทำโค้ดออกมาให้โหลดเพื่อเป็นตัวอย่างนะครับสำหรับคนที่ยังไม่เก่งนะครับ
ทำให้แล้วครับ อยู่ตอนท้ายของบทความครับ สงสัยตรงไหนลองมาถามนะครับ ขอบคุณครับ
ผมได้ลองแล้วครับ สามารถอัพโหลดข้อมูลได้ แต่ว่ามันไม่บอกเป็น % หรือว่าผมยังไม่ได้ติดตั้ง apc ช่วยแนะนำวิธีติดตั้ง apc หน่อยครับ เอาแบบชัดๆเลยนะผมติดตั้งไม่ผ่านซักที ผมใช้ apc_cache_info(); ดูแล้ว มันก็ขึ้นแบบนี้นะครับ Fatal error: Call to undefined function apc_cache_info() in C:\xampp\htdocs\Aui.php on line 2 ช่วยหน่อยนะครับ
เงียบเลย แงๆๆ
ใช่แล้วครับ แบบนี้แสดงว่ายังไม่ได้ติดตั้ง APC ครับ ลองติดตั้งดูก่อนนะครับ สำหรับวิธีการติดตั้ง APC บน Windows นั้น ลองเข้าไปดูที่นี่เลยครับ http://docs.moodle.org/en/Installing_APC_in_Windows
จะพยายามครับ
ทำตามที่เขาบอกแล้วนะครับ ก็อปปี้ php_apc.dll ไปไว้ที่ c:\php\ext แล้ว และก็แก้ไข php.ini ให้เป็นแบบนี้แล้ว extension = php_apc.dll ก็ยังใช้ไม่ได้นะ เป็นเพราะไรเหรอ
restart apache แล้วหรือยังครับ
ลอง phpinfo ให้ผมดูได้หรือเปล่าครับ
ผมทำเป็นรูปที่นี่ให้ดูด้วยนะครับ phpinfo
http://www.zidoupload.com/f-Xwy3Td4D
ไม่เห็นมี apc เลยครับ เหมือนว่ายัง install ไม่ผ่านเลยครับ
ผมก็ทำตามตัวอย่างที่ให้มาแล้วนะ ยังไม่ได้เลย เศร้าจัง
ถ้าทำการติดตั้ง apc สมบูรณ์แล้วมันจะขึ้นว่าอย่างไงเหรอครับ
มันจะขึ้นตามรูปนี้ใน phpinfo() ครับ
http://www.zidoupload.com/f-u7U10kH3
ลองดูนะครับ
ไม่ทราบว่าพอจะมีเทคนิดทำ upload progress bar แบบอื่นไหมครับที่ไม่ต้องพึ่ง apc คือโฮสที่ผมเช่าอยู่เขาไม่สามารถติดตั้ง apc ได้เพราะมันไปตีกับ zent optimize นะครับ ผมเลยใช้ progressbar ที่คุณเอามาสอนไม่ได้นะครับ
ขอเมลหน่อยได้ไหมครับจะได้ปรึกษาเรื่องนี้นะครับ เพราะผมกำลังทำเว็บอยู่เว็บหนึ่ง จำเป็นต้องใช้ upload แบบมี progressbar นะครับ และยังสนใจ upload progress bar ที่คุณสอนอยู่นะครับ เมลผมคือ daggerszoon@hotmail.com ขอบคุณครับ
ทางเลือกอื่น ๆ สำหรับ Upload Progress ในกรณีที่ใช้ APC ไม่ได้ครับ
http://www.devpro.it/upload_progress/
http://bluga.net/projects/uploadProgressMeter/
http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/
http://www.koolphp.net/?mod=products&act=view&id=9
บางอันก็ฟรี บางอันก็ไม่ฟรี บางอันเป็น Ajax บางอันไม่ใช่ และเข้าใจว่า ทุกอันไม่ได้ใช้่ jQuery (อาจจะเอามาปรับใช้ได้ ผมยังไม่้ได้ลองครับ)
ไปเจอ upload progress bar แบบใหม่มาคิดว่าไม่น่าจะต้องให้ apc นะ ลองเอาไปใช้ดูนะครับ ได้ผลอย่างไงช่วยบอกผมด้วย
http://www.drogomir.com/blog/2008/6/30/upload-progress-script-with-safari-support
ขอบคุณมากครับ
ขอบคุณจริง
ไมได้เล่น เน็ทมา เกือบเดือน อือื
คือตอนนี้ผมใช้อัพโหลดจาก page แรก แล้วสั่งให้ไปใช้ code upload อีก page หนึ่ง โดย page แรกผมใช้ iframe ดึงรูป progress มาใช้งาน
สงสัยว่า อยากจะเอาของคุณมาพัฒนา แต่ลองเอา code ไปใส่ดูแล้ว มันไม่ได้ ยัง errorอยู่เลย ช่วยแนะนำด้วยครับ
ปล.คือตอนนี้ลองโหลด demo ไปลองแล้วแต่ยังไม่ได้เช่นกันครับมันยังอัพโหลดไม่ได้และก็ไม่มี %วิ่งเลย
ได้ลง APC แล้วหรือยังครับ
http://drogomir.com/files/blog/jquery-upload-progress/example/
ตัวอย่างที่ผมทดลอง ใช้งานได้จริงครับ
แจ๋วไปเลยครับ
thank ka
จะลองดูขอบคุณหลาย ๆ ครับ
enctypemultipart คืออะไรหรือครับ ?
ปล. ผมมือใหม่ (มากๆ) เพิ่งมาเจอไม่เข้าใจจริงๆ ครับ
Enctype คือชนิดของการเข้ารหัสข้อมูล โดยค่า default ของ Enctype จะเป็น application/x-www-form-urlencode ซึ่งจะถูกใช้ร่วมกับ Method แบบ POST
ปล. ถามเองตอบเอง -.-”a
ถูกครับ การกำหนด enctype หมายถึงการกำหนด encode type ให้กับ form ครับ โดย default เป็นตามที่คุณบอกแหละครับ แต่เรากำหนด multipart/form-data เพื่อเปลี่ยนวิธีการ encode ครับ ข้อมูลที่ส่งไปยัง server จะถูกแบ่งเป็นส่วน ๆ ครับ (multipart) โดยมีทั้งข้อมูลที่เป็น field ในฟอร์ม และ file content (binary) ส่งไปที่ server ได้ครับ (application/x-www-form-urlencode ไม่สามารถส่ง binary data ได้ครับ)
มีคำถามครับ
ตัวอย่างที่แจกมันไปเก็บไฟล์ไว้ที่ไหนหลังจากอัพไฟล์เสร็จแล้วครับ ?
เจอคำตอบเกี่ยวกับตำแหน่งที่เก็บไฟล์แล้วครับ -.-”
แต่มีคำถามต่อมา !?
หลังจากอัพแล้วมีข้อความปรากฏดังนี้ครับ
Warning: POST Content-Length of 144803098 bytes exceeds the limit of 134217728 bytes in Unknown on line 0
ไม่ทราบเป็นเพราะว่าอะไรหรือครับ ?
รู้สึกว่าจะเป็นเครื่องเดียว อีกเครื่องไม่เป็น – -”?
ตอนนี้อีกเครื่องผมใช้ Debian มี APC แล้ว
อัพโหลดได้นะ แต่ไม่แสดงข้อมูลที่ควรจะแสดง เช่น % ขณะอัพ
ไฟล์ก็เอามาจากตัวอย่างนะครับ +.+”?
(ที่แปลกคือเวลาอัพมันแสดง % ด้านล่างแทน O.o !)
http://www.zidoupload.com/f-Rk3q5fYt
ปล. มารบกวนขอเกาะติด(ดูด)ความรู้จนกว่าจะได้ละกัน
ตอบคำถามแรกครับ
หลังจากอัพเสร็จแล้ว มันจะเอาไปลงไว้ใน folder ที่กำหนดไว้ใน php.ini ครับ ดูค่า upload_tmp_dir นะครับ เวลาเราจะใช้งานก็ใช้ move_uploaded_file() ย้ายไฟล์ไป folder ที่ต้องการก่อนครับ
คำตอบที่สอง คือ server ตั้งค่าให้รับ post ได้สูงสุด 128MB ครับ ลองดูใน php.ini ที่ตัวแปร post_max_size ครับ
คำตอบสุดท้าย ผมไม่รู้จะเช็คยังไงให้ได้ครับ ลง APC แล้ว อย่าลืม enable apc.rfc1867 ให้เป็น On ด้วยนะครับ
ขอบคุณสำหรับคำตอบครับ เดียวจะลองไปตรวจสอบดู
มีคำถามข้อต่อไปมารบกวน ^.^”
หลังจากอัพเสร็จแล้วจะทำลิงค์ให้ดาวโหลดด้วยต้องเพิ่มเติมส่วนไหนครับ?
ก็ทำหน้าที่ไปดึงไฟล์ออกมาน่ะครับ
ผมใช้ Head ช่วยเวลาดึงแล้วไฟล์มันเสียครับ
พอจะมีวิธีอื่นแนะนำไหมครับ ?
หรือว่าเสียตั้งแต่ตอนอัพแล้ว -0-”?
จากผลการทดสอบ
.Zip ไม่มีปัญหาแต่
.Rar อัพไปแล้วโหลดคืนไฟล์จะเสีย -0-”
ปล. พักไว้ก่อนเรื่องไฟล์เสียไม่เสีย มามุ่งที่ upload progress
ไฟล์เสีย? ลองเอาพวกโปรแกรมเปิดไฟล์เป็นฐาน 16 เปิดดูสิครับ ว่ามีอะไรผิดปกติหรือเปล่า
อันนี้ ไม่เสียนะ ผมใช้อยู่ http://www.google.co.th/url?sa=t&source=web&ct=res&cd=1&ved=0CAoQFjAA&url=http%3A%2F%2Fwww.uploadify.com%2F&ei=4QNBS9LTOZGgkQXknfTwAw&usg=AFQjCNEpTOmRIaTRQ7F8JNaxa7VhKljjwQ&sig2=Z8-QJYAx2TDP1ebsLjq1qg
โอ้ว สุดยอดมากมาย
มีให้เลือกอัพหลายแบบ -0-”
เปลี่ยนใจมาทำแบบนี้ดีกว่า อิ อิ
ใจจริงอยากได้แบบมีคอมเมนต์ติดไปกับไฟล์ด้วย
เวลาเรียกรูปหรือเรียกไฟล์จะได้จะจำได้ว่าเป็นไฟล์เกี่ยวกับอะไร
แต่ไม่รู้จะออกแบบเก็บคอมเมนต์ไว้ในไหนดี
ปล. สวัสดีปีใหม่ทุกคนและขอขอบคุณทุกท่านที่ตอบคำถามครับ ^^”
อยากทราบรายละเอียดวิธีการทำคอมเมนต์ไฟล์ครับ
เวลาอัพแล้วเก็บไฟล์คอมเมนต์ไว้ที่ไหนหรือครับ ?
แล้วมีโอกาสที่กลับไปแก้ไขคอมเมนต์ได้หรือเปล่า ?
ปล. ขอบคุณครับ
comment ติดกับไฟล์นี่หมายถึงยังไงอ่ะครับ ยกตัวอย่างให้เห็นหน่อยครับ
เหมือน http://www.zidoupload.com/ ครับ
เวลาอัพจะใส่ comment ลงไปได้
เวลาโหลดก็โชว์ comment ให้อ่านเช่นกัน
ตอนนี้ enable apc.rfc1867 ให้เป็น On ได้แล้ว
http://www.zidoupload.com/f-l2lNl6JN <— รูป
ลองรีสตาร์ apache แล้วก็ยังไม่ขึ้นรายละเอียดเหมือนเดิม
ไม่ทราบว่ายังขาดตรงจุดไหนหรือเปล่าครับ ?
ผมใช้วิธีแยกเก็บครับ คือไฟล์ส่วนไฟล์ คอมเมนท์ส่วนคอมเมนท์ครับ คอมเมนท์ลง database ครับ
บน Server Linux ผม Enable ตัว apc.rfc 1867 เป็น On แ้ล้ว
ลองทดสอบใช้ไฟล์ตัวอย่างของท่านอัพโหลดก็ยังไม่โชว์ % กับขนาดไฟล์นะ
ไม่ทราบว่ายังต้องปรับค่าตรงไหนเพิ่มอีกหรือเปล่าครับ ?
ปล. ขอบคุณครับ
มี url ให้ผมเข้าไปดูมั๊ยครับ
ผมขอดูหน้า phpinfo() ด้วยนะครับ