AJAX ตอนที่ 2 : Upload แบบไม่เปลี่ยนหน้า

หัวข้อ บทความ แทก Ajax | HTML | JavaScript | PHP

จริงๆไม่อยากเรียกว่า AJAX เลย ^^ แต่เอาว่ามันใช้แนวๆเดียวกันผสมหลายๆเทคนิคเข้าด้วยกัน
เรื่องของเรื่องมาจากว่า ผมพยายามทำ Form Upload File โดยที่ไม่ต้องการให้ข้อมูลเปลี่ยนหน้า

หลังจากหาข้อมูลจาก Web ต่างๆแล้วพบว่า

ผมไม่สามารถเขียน Post Data ผ่าน xmlhttp ได้ (เนื่องจากติดเรื่องความปลอดภัยของ Javascript
เอาไว้จะเขียนเรื่องการ Post Get ผ่าน xmlhttp แบบละเอียดให้อีกที)

และผมก็ไปเจอเทคนิคที่หลายๆ Site ใช้กัน เล่นเอาอึ้งเลยครับ

อันดับแรกเขียน Form Upload และ Script Upload ก่อน

upload.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Upload ไม่เปลี่ยนหน้า</title>
</head>
<body>
<form id="frmUpload" action="upload.php" method="post" enctype="multipart/form-data">
ระบุ File ที่จะ Upload สิจ๊ะ<br>
<input id="fileupload" name="fileupload" type="file"> 
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</html>

upload.php

<?

$file = $_FILES['fileupload']['name'];
$typefile = $_FILES['fileupload']['type'];
$sizefile = $_FILES['fileupload']['size'];

$tempfile = date("Y-m-d")."-".$file;

copy($_FILES['fileupload']['tmp_name'],$tempfile);
echo "OK ";

?>

Script ที่เห็นเริ่มแรกนี่คงไม่มีอะไรมาก เป็น html form upload file โดยที่ มี upload.php เขียนรับ File เอาไว้
โดยตัว upload.php ผมก็ rename ชื่อ ตามวันที่ตั้งเข้ามา ซึ่งถ้าใช้งาน Script นี้ ระบบก็จะเปลี่ยนหน้าเข้าไปที่
หน้าของ upload.php ส่งคำว่า OK ออกมา

สร้าง Target เพิ่ม Javascript ตรวจสอบข้อมูล

เนื่องด้วยเมื่อกด Submit มันจะ Load หน้าใหม่ ฉะนั้นผมจึงเพิ่ม Target เข้าไปให้ ผลที่ได้ไปลงไว้ที่ Window ชื่อ uploadtarget
โดย Window ชื่อ uploadtarget นี้ผมกำหนดเป็นแบบ iframe ซะเลย :P แถมกำหนดให้แสดงผลแบบ 0 ด้วย และผมก็เพิ่ม
Javascript เพื่อตรวจสอบข้อมูลก่อนว่า คนกดต้องระบุ path File เข้ามา

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Upload ไม่เปลี่ยนหน้า</title>

<script language="javascript">
function clickupload()
{
if ( document.getElementById('fileupload').value.length == 0 )
{
alert( 'ระบุ File ที่จะ Upload สิจ๊ะ' ) ;
return false ;
}
return true ;
}
</script>

</head>
<body>
<iframe id="uploadtarget" name="uploadtarget" src="" style="width:0px;height:0px;border:0"></iframe>
<form id="frmUpload" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
ระบุ File ที่จะ Upload สิจ๊ะ<br>
<input id="fileupload" name="fileupload" type="file"> 
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</html>

คราวนี้ Script จะเช็คล่ะ ว่าที่คลิกเข้ามามีข้อมูลหรือเปล่า (เช็คคร่าวๆน่ะครับ) ถ้าผ่านก็จะ submit form ไปที่ window ชื่อ
uploadtarget โดยที่ uploadtarget คือ iframe ที่ขนาด 0x0 อิอิ

แต่งหน้าตามีข้อความบอกสถานะซักนิด

อาจจะดูไม่ดีถ้าคลิก submit แล้วหน้าตานิ่้งๆ (แน่นอนเพราะมัน upload file เข้ามามันต้องใช้เวลาซักครู่) ฉะนั้นเขียนตัวบอก
สถานะซักนิดก็ดีนะเนี่ย

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Upload ไม่เปลี่ยนหน้า</title>

<script language="javascript">
function clickupload()
{

if ( document.getElementById('fileupload').value.length == 0 )
{
alert( 'ระบุ File ที่จะ Upload สิจ๊ะ' ) ;
return false ;
}

document.getElementById('upmsg').innerHTML = 'กำลัง Upload อยู่นะจ๊ะ รอซักครู่...' ;
document.getElementById('btnUpload').value = "ส่งไปแล้วไม่ต้องคลิกซ้ำ";
document.getElementById('btnUpload').disabled = true ;

return true ;
}
</script>

</head>
<body>
<iframe id="uploadtarget" name="uploadtarget" src="" style="width:0px;height:0px;border:0"></iframe>
<form id="frmUpload" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
<span id="upmsg">ระบุ File ที่จะ Upload สิจ๊ะ</span><br>
<input id="fileupload" name="fileupload" type="file"> 
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</html>

คราวนี้เมื่อคลิก submit ระบบจะทำการเปลี่ยน ข้อความเป็น กำลัง Upload และทำการล๊อกปุ่มไม่ให้คลิกเข้ามาซ้ำอีก

สั่งให้ uploadtarget กลับมาเปลี่ยนหน้าหลัก

พอคลิกไปแล้ว upload.php จะส่งคำว่า OK กลับมามานึกๆ อย่างงี้ user ก็ไม่รู้สิว่า File upload เสร็จแล้ว
ฉะนั้นผมต้องทำให้ upload.php ส่งค่า หรือ ข้อมูลกลับมาให้หน้า upload.html แสดงว่า Upload เสร็จแล้ว

upload.php

<?

sleep(3);
$file = $_FILES['fileupload']['name'];
$typefile = $_FILES['fileupload']['type'];
$sizefile = $_FILES['fileupload']['size'];

$tempfile = date("Y-m-d")."-".$file;

copy($_FILES['fileupload']['tmp_name'],$tempfile);

?>
<script language="JavaScript">

</script>

ผมสั่งให้ Script หยุดการทำงาน 3 วินาที sleep(3) เพื่อให้เห็นว่าหน้า upload แสดงสถานะได้ (เวลาใช้งานจริงเอาออกก็ได้)
เมื่อ upload.php ทำงานเสร็จมันจะสั่งให้ javascript ทำงานโดย javascript นี้เรียก function uploadok โดยส่งค่าชื่อ File ไปด้วย
โดย uploadok นี้อยู่ที่ window หลัก (window.parent) เราไปตามยำ upload.html เพื่อใส่ funtion uploadok ต่อ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Upload ไม่เปลี่ยนหน้า</title>

<script language="javascript">
function clickupload()
{

if ( document.getElementById('fileupload').value.length == 0 )
{
alert( 'ระบุ File ที่จะ Upload สิจ๊ะ' ) ;
return false ;
}

document.getElementById('upmsg').innerHTML = 'กำลัง Upload อยู่นะจ๊ะ รอซักครู่...' ;
document.getElementById('btnUpload').value = "ส่งไปแล้วไม่ต้องคลิกซ้ำ";
document.getElementById('btnUpload').disabled = true ;

return true ;
}

function uploadok(pathfile)
{
document.getElementById('fileupload').value ="";
document.getElementById('upmsg').innerHTML = 'Upload เสร็จแล้ว <br> file อยู่ที่<Br><a href="'+pathfile+'" target="_blank">'+pathfile+'</a><br>ระบุ File ใหม่ต่อไปได้เลย' ;
document.getElementById('btnUpload').value = "Upload เลยเด่ะ";
document.getElementById('btnUpload').disabled = false;
document.getElementById('frmUpload').reset() ;
return true ;
}

</script>

</head>
<body>
<iframe id="uploadtarget" name="uploadtarget" src="" style="width:0px;height:0px;border:0"></iframe>
<form id="frmUpload" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
<span id="upmsg">ระบุ File ที่จะ Upload สิจ๊ะ</span><br>
<input id="fileupload" name="fileupload" type="file"> 
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</html>

คราวนี้พอ Script upload.php ทำงานก็จะส่งค่ากลับมาที่หน้าหลักและรายงานผลเรียบร้อยแล้ว ^^

สรุป

จากที่เห็นระบบจะไม่มีการเปลี่ยนหน้าเลย (ทำงานอยู่บน upload.html อย่างเดียว) โดยจริงๆจะเรียกว่า AJAX ก็คงไม่ได้
(มันไม่ได้เรียก XML หรือใช้ xmlhttp อะไรเลย) แต่เป็นการเล่น Javascript ช่วยควบคุมการแสดงผลมากกว่า

ว่าแล้วไปลองกันดูละกันครับ วิธีนี้น่าจะประยุกต์เข้ากับงานอื่นๆได้

รูปคุณ Read (11,558) Comments (24) 2006-05-22 21:39:18

very good

รูปคุณ tresspasser โดยคุณ tresspasser 2007-04-19 17:22:18

ใช้ XMLHttpRequest ด้วยก็ได้ครับ
หลังจากที่ตรวจสอบว่าได้เป็น ok แล้ว
เราค่อยส่ง XMLHttpRequest ออกไปเพื่อไปอ่านค่าใน database แล้วเอามาแสดงผลครับ

รูปคุณ กยกผ โดยคุณ กยกผ 2007-04-23 11:41:49

แหม๊..... ทำไปได้.......
แต่ก็ OK นะ ไอเดียเจงดี...

รูปคุณ Mao โดยคุณ Mao 2007-05-15 09:46:40

สุดยอดเลยครับ ขอเอาไปประยุกต์ใช้กับการอับเดทค่าต่างๆ
แทน AJAX นะครับ
จะได้ไม่มีปัญหาเรื่องการเข้ารหัสไฟล์แบบ utf-8

รูปคุณ ปั๊กคุง โดยคุณ ปั๊กคุง 2007-06-07 09:42:08

ผมกำลังเรียนอยู่ คับ แล้วถ้าเราจะระบุ ปลายทางเรากำหนดที่ตรงไหนคับ ขอบคุณคับผม

รูปคุณ cookie โดยคุณ cookie 2007-06-14 12:51:59

จาก Code ข้างต้น ผมอยากจะทราบว่า ไฟล์นี้มีขนาดเท่าไหร่ เขียน code ของ javascript อย่างไรครับ ช่วยด้วยครับ ด่วนมาก คิดไม่ออกเลย

รูปคุณ ผู้เรียนคนใหม่ โดยคุณ ผู้เรียนคนใหม่ 2007-07-23 14:44:14

ถ้าจะuploadที่ละหลายไฟล์นะจะต้องทำอย่างงัยโดยที่จะต้องบันทึกลงdatabase และชื่อไฟล์ที่อัพโหลดไม่เหมือนกัน

รูปคุณ - โดยคุณ - 2007-08-14 12:49:18

ทำไปได้...
แต่ก็ขอบคุณ...มากมาก

รูปคุณ - โดยคุณ - 2007-08-20 17:46:58

ขอพระคุณทุกๆ ทั่น เก่งๆ ทั้งนั้นเลยครัย

รูปคุณ Sittiiii Ch. โดยคุณ Sittiiii Ch. 2007-08-21 15:54:36

ขอบคุณมากๆ หามานาน

รูปคุณ ดีจัง โดยคุณ ดีจัง 2007-08-31 13:12:52

http://www.meelink.com/webboard/data/3/0111-1.html

สงสัยคนเดียวกันเขียน เลยเหมือนกัน เฮียอั้มไปเขียนไว้แต่เมื่อใหร่ ก๊าก
9Aum Clone

รูปคุณ deawx โดยคุณ deawx 2007-08-31 15:21:36

ขอบคุณสำหรับความรู้ที่ให้มานะคะ อยากได้ตัวอย่างที่เป็น jsp ด้วยอ่ะ คือว่า ไม่เคยเขียน php อ่ะค่ะ แต่จะนำไปประยุกต์ใช้นะคะ ขอบคุณมากนะคะ

รูปคุณ kae โดยคุณ kae 2007-10-09 17:03:00

!!! ขนาดไฟล์ที่ upload ได้ php กำหนดไว้ 2M ใน php.ini ผมแก้เป็น 5M แล้วแต่มันไม่ได้หนะครับ ทำไงดี

แต่ยังไงก็ขอบคุณมากจริงๆ เลยครับ ได้ความรู้ใหม่ๆ เยอะเลยครับ ขอบคุณจากใจจริงๆ

รูปคุณ ityellow โดยคุณ ityellow 2007-10-17 11:55:40

echo "<b>รายละเอียดของไฟล์ที่ได้รับ</b><br>\n";
echo "ชื่อไฟล์ : " . $HTTP_POST_FILES['fileupload']['name'] . "<br>\n";
echo "ขนาดของไฟล์ : " . $HTTP_POST_FILES['fileupload']['size'] . " ไบต์<br>\n";
echo "ประเภทไฟล์ : " . $HTTP_POST_FILES['fileupload']['type'] . "<br>\n";

รูปคุณ yut โดยคุณ yut 2007-10-25 09:37:30

ท่าจะให้ดี Browser ต้องไม่กะพริบ...
แต่ยังไงก็อธิบายเป็นขันตอนดีมาครับ ทำให้เข้าใจงาย..

ขอบคุณหลาบๆๆๆๆ ครับ..............

รูปคุณ AJAX โดยคุณ AJAX 2007-11-30 01:42:39

กำลังหาวิธีอยู่พอดีเลยครับ เจ๋งๆ thanksๆ

รูปคุณ ming9899 โดยคุณ ming9899 2008-02-07 13:53:54

ขอบคุณมากๆเลยครับพี่

รูปคุณ hong โดยคุณ hong 2008-03-22 17:29:43

ความรู้ทั้งนั้น ขอบคุณครับ

รูปคุณ InTacT. โดยคุณ InTacT. 2008-04-16 14:37:34

ถ้าเป็น asp ไปที่ %Windows dir%\System 32\Inetsrv\MetaBase.xml
แก้เพิ่มไซส์ที่ AspMaxRequestEntityAllowed attribute นะครับ
แต่ไม่รู้ว่า php แก้ไง

รูปคุณ bb โดยคุณ bb 2008-04-28 15:40:38

ขอขอบคุณมากครับ

คืออยากจะรู้วิธีให้รูปไปเซฟ ในโฟร์เดอร์อื่นอะครับช่วย เขียนเพิ่มเติมให้หน่อยนะครับ
ขอบคุณครับ

รูปคุณ ong โดยคุณ ong 2008-05-19 22:57:32

ขอบคุณมากๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ
ขอบคุณมากๆครับ

หาอยู่วิธีการเช่นนี้

ขอบคุณจริงๆ

รูปคุณ niquez โดยคุณ niquez 2008-06-04 04:41:18

ขอถามต่อครับ

ถ้าเราต้องการจำกัดขนาด file
ต้องใส่อะไรตรงไหนครับ

ขอบคุณครับ

รูปคุณ niquez โดยคุณ niquez 2008-06-04 04:54:18

สุดยอดเลยท่าน นับถือๆ

รูปคุณ Gunner9 โดยคุณ Gunner9 2008-08-11 02:34:53

งง ครับ ขอละเอิยดกว่านี่น่อยครับ ขอบคุณครับ

รูปคุณ นายธวัชชัย โดยคุณ นายธวัชชัย 2008-08-31 21:43:02

Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 6

AJAX ตอนที่ 2 : Upload แบบไม่เปลี่ยนหน้า

ความคิดเห็น

ร่วมแสดงความคิดเห็น

เข้าระบบ

บทความล่าสุด

Tags

เพื่อนบ้าน

สถิติส่วนตัว