Scriptdd.com

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

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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">
<!--
window.parent.uploadok('<?=$tempfile?>');
//-->
</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">&nbsp;
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</html>


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



สรุป

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

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

รูปคุณ Read (57,275) Comments (41) 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

ใช้ Library นี้น่าจะสะดวกกว่านะ

AJAX file upload
http://www.webtoolkit.info/ajax-file-upload.html

มี event handler onStart , onComplete ให้ด้วยสะดวกดี

รูปคุณ pong โดยคุณ pong 2008-10-21 00:54:29

โห!สุดยอด เจ๋งมากเลยครับพี่

รูปคุณ ภานุวัฒน์ โดยคุณ ภานุวัฒน์ 2008-12-20 20:57:50

ขอบคุณมากครับ สุดยอดมากเลย

รูปคุณ โหน่ง โดยคุณ โหน่ง 2009-01-25 02:11:12

สุดยอด ขอบคุนคับ

รูปคุณ เด็กน้อย โดยคุณ เด็กน้อย 2009-01-27 11:10:23

อยากทราบตรงส่วน copy ค่ะ
อยากทราบว่ารายละเอียดว่า ตรงใหนเป็น file ตรงใหนระบุ foder อ่ะค่ะ
เพราะตอนนี้เขียน php แล้วเวลาก๊อปปี้รูปไม่มีใน foder ที่กำหนดน่ะค่ะ

รูปคุณ anoza โดยคุณ anoza 2009-02-13 11:53:59

ดีมากคับ

รูปคุณ 2499 โดยคุณ 2499 2009-06-12 15:08:44

เยี่ยมไปเลยนาย

รูปคุณ gon โดยคุณ gon 2009-06-26 23:38:33

ขอบคุณมากครับ กำลังหาอยู่พอดีเลย

รูปคุณ ืnoom โดยคุณ ืnoom 2009-10-09 11:18:29

โห่พี่ !!!!!

มาสอนหนูมั้งดิ

ไม่ได้เรียนแต่อยากเขียนเปงอ่ะ

^________________^

รูปคุณ gift โดยคุณ gift 2009-12-21 00:15:59

testบนredhat4.5ไม่ได้อะ
พออับโหลดแล้วตอนโชรูปไม่มันกลายเป็นรูปเก่าอะ
กำลังคิดว่าน่าจะเป็นที่window.parent.uploadok หรือเปล่าไม่แน่ใจ
ถ้ายังดูแลอยู่ช่วยตอบหน่อยนะครับพอดีเห็นว่าโพสไว้นานแล้ว
ขอบคุณครับ

รูปคุณ tle โดยคุณ tle 2010-04-30 12:45:31

ขอบคุณมากๆเลยค่ะ
อธิบายได้ละเอียดมากเลย

รูปคุณ pompo โดยคุณ pompo 2010-07-08 13:32:57

ขอบคุณครับ

รูปคุณ มือใหม่ โดยคุณ มือใหม่ 2010-08-27 11:07:00

กำลังหาพอดี

รูปคุณ gootooyoo โดยคุณ gootooyoo 2010-10-04 13:47:55

ขอบอกจริง ๆ ว่า โคตรจิ๊ด...... เลย ครับ ขอบคุณมากครับ

รูปคุณ worapatr โดยคุณ worapatr 2011-03-17 12:19:24

เก่งจริงคนไทย นับถือครับ
น้ำใจก็งาม ขอบคุณมาก

รูปคุณ B-Bangna โดยคุณ B-Bangna 2011-03-29 21:04:42

for(i=0;i<infinity;i++){
print('ขอบคุณครับ');
}

รูปคุณ hunru โดยคุณ hunru 2011-05-02 11:28:43

Does your website have a contact page? I'm having trouble locating it but, I'd like to send you an e-mail. I've got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.

รูปคุณ Adriene โดยคุณ Adriene 2014-08-10 23:40:15

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



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

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

Gallery

เรียบร้อยพร้อมใช้คู่นี้ราคา 220 บาทคร้าบ @hongsyok @kangg วิธีซ่อมเอายางในมาติดกับพื้นรองเท้าตรงรูที่ขาด  @hongsyok @kangg รูความเสียหาย basic ของรองเท้าวิ่งประเภทตาข่างนี้  @hongsyok @kangg รองเท้ามือสองคู่ล่าสุด @hongsyok @kangg ยินดีกับกลุ่มข้ามเพศด้วยฮะ หน้าตาให้ ใจรักก็ลุยฮะ ความ Classic ของ ThinkPad แม้แต่ Lenovo ยังแยกแยะรุ่น ไม่ออกเลย ไอ้ควายเอ้ย น้ำตาแตกทุกราย เกาหลี รับเหรียญทองแล้ว ห่าง 1 แต้มแล้วเกาหลีนำ เอ้า สาวแว่นอีกซักรูป ฮาๆ ดอกนี้ เกาหลีโหดสาดกลางเป้าเลย อีกมุม ดอกนี้ เกาหลีโหดสาดกลางเป้าเลย จีนก็น่ารักนะฮ้าฟ ได้รูปสาวแว่นคนที่ 2 ของเกาหลีชัดๆแล้ว ภาพ Set ยิงธนูหญิง เกาหลี อีกคนก็น่ารัก ภาพ Set ยิงธนูหญิง เกาหลี สาวแว่นๆ อีกคน ภาพ Set ยิงธนูหญิง เกาหลี สาวแว่นๆ ดูระดับความคมชัด 720P จาก Youtube รื้อ HDD ลูกเก่าๆเจอ คลิป 500 วัน 1500 ไมล์ สมัย Load เก็บมาจาก mcot.net ดูไปอมยิ้มไป cc @1500miles

Tags

BarCampBangkok Security Home API ThinkPad Freeware CSS Mobile ASP Software TV HTML Book bicycle How to Blog Framework Shopping Android FTR ล้อหมอบ Music Testdrive Yahoo Gallery Windows AIS Payment Gateway Review vintage

อื่นๆ ...

เพื่อนบ้าน

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

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.0371 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout