จริงๆไม่อยากเรียกว่า 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>
<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 ";
?>
$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>
<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>
<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">
<!--
window.parent.uploadok('<?=$tempfile?>');
//-->
</script>
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">
<input id="btnUpload" type="submit" value="Upload เลยเด่ะ">
</form>
</body>
</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 ช่วยควบคุมการแสดงผลมากกว่า
ว่าแล้วไปลองกันดูละกันครับ วิธีนี้น่าจะประยุกต์เข้ากับงานอื่นๆได้
Credit : http://www.scriptdd.com/webtip/ajax-upload-no-reload-lesson-2.html
0 ความคิดเห็น :
แสดงความคิดเห็น