code php นี้เกี่ยวกับวิธีการทำ upload ไฟล์ ซึ่งหลายท่านอาจะเคยทำมาแล้วแต่ code ตัวนี้มีความพิเศษกว่าวิธีที่ผมเคยใช้มาก่อน นั้นก็คือมันเป็นโค้ดที่ทำการ upload โดยที่ไม่มีการเปลี่ยนหน้าให้รำคาญใจเลยทุกอย่างทำเสร็จในหน้าเดียว แต่ดูโค้ดแล้วอาจจะยุ่งยากนิดหน่อย แต่ก็ได้ผลลัพธ์ที่คุ้มค่าทีเดียวครับ ดูตัวอย่าง code php ด้านล่างเลยครับ
ขั้นตอนแรกเขียน Form Upload และ Script Upload ก่อน
โค้ดไฟล์ upload.html
<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>
คำอธิบายโค้ดสีสีเขียว คือ เมื่อกด Submit มันจะ Load หน้าใหม่ ฉะนั้นผมจึงเพิ่ม Target เข้าไปให้
ผลที่ได้ไปลงไว้ที่ Window ชื่อ uploadtarget โดย Window ชื่อ uploadtarget
นี้ผมกำหนดเป็นแบบ iframe ซะเลย แถมกำหนดให้แสดงผลแบบ 0 ด้วย และผมก็เพิ่ม Javascript เพื่อตรวจสอบข้อมูลก่อนว่า คนกดต้องระบุ path File เข้ามา
คำอธิบายโค้ดสีแดง คือ การบอกสถานะการดำเนินการ คราวนี้เมื่อคลิก submit ระบบจะทำการเปลี่ยน ข้อความเป็น กำลัง Upload
และทำการล๊อกปุ่มไม่ให้คลิกเข้ามาซ้ำอีก
และตามด้วยโค้ดไฟล์ upload.php
<?
sleep(3);
$file = $_FILES['fileupload']['name'];
$typefile = $_FILES['fileupload']['type'];
$sizefile = $_FILES['fileupload']['size'];
$tempfile = date("Y-m-d")."-".$file;sleep(3);
$file = $_FILES['fileupload']['name'];
$typefile = $_FILES['fileupload']['type'];
$sizefile = $_FILES['fileupload']['size'];
copy($_FILES['fileupload']['tmp_name'],$tempfile);
?>
<script language="JavaScript">
<!--
window.parent.uploadok('<?=$tempfile?>');
//-->
</script>
พอ Script upload.php ทำงานก็จะส่งค่ากลับมาที่หน้าหลักและรายงานผลเรียบร้อยแล้ว
10 ความคิดเห็น:
เยี่ยมครับ
ขอบคุณครับ
ไฟล์ที่จะอัพนี่จะเข้าในฐานข้อมูลมั้ยครับ
เข้าครับ
ผมลองทำครับ มันinsert ได้ แต่ผมหาตำแหน่งของไฟล์ไม่ไ้ดครับ ไม่รุ้ไฟลืปอยู่ไหนน่ะคับ
Good
สร้าง Folder file แล้วเอาไปเก็บไว้แบบนี้ค่ะ
$tempfile = "file/".date("Y-m-d")."-".$file;
เยี่ยมมากครับ ผมลอง ทำ sub folder ดู มันสุดยอกมากเลย
สร้าง folder ไฟล์ ไปไว้ที่ไหนค่ะ
ใครทำได้ รบกวน แอดไลน์ thenammm หน่อยนะค่ะ ขอบคุณค่ะ
แสดงความคิดเห็น