เนื้อหาในบทความนี้ เป็นแนวทาง การประยุกต์ และสร้างฟังก์ชั่นใช้งาน
ให้สะดวกมากขึ้น สามารถนำบางส่วนไปดัดแปลง ประยุกต์ต่อยอดเพิ่มเติม
เนื้อหาดัดแปลงมาจากบทความ
เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป
https://www.ninenik.com/content.php?arti_id=306 via @ninenik
และ
javascript เรียกฟังก์ชัน ใน parent จาก iframe
https://www.ninenik.com/content.php?arti_id=305 via @ninenik
หลักการทำงาน คือ เรามีฟอร์มหนึ่ง ที่มี textbox และ input file ซึ่งเราจะให้ทำงาน
พร้อมกันทั้งการส่งค่า textbox และ อัพโหลดไฟล์ โดยที่ไม่ต้องให้มีการ เปลี่ยนไปหน้า
ใหม่หรือ reload เพจ โดยอาศัยวิธีการส่งค่าผ่าน iframe
ขอแยกสั่งที่ได้จากการประยุกต์ เราได้ฟังก์ชั่น php อย่างง่ายสำหรับอัพโหลดไฟล์
ดังนี้
<?php
// function up file
function upfile_only($file,$filelocate,$limit_size=2000000){
$allowed_types=array("doc","pdf","txt");
$error_msg="";
$status=0;
$arr_file_up=array();
if($file["name"]!=""){
$fileupload1=$file["tmp_name"];
$g_file=explode(".",$file["name"]);
$ext = strtolower(array_pop($g_file));
$file_up=time().date("Ymd").".".$ext; // กำหนดรุปแบบชื่อไฟล์
$unitFile="";
$textFileSize="";
if($limit_size>=1000000){
$textFileSize=round($limit_size/1000000, 0);
$unitFile="MB";
}elseif($limit_size>=1000){
$textFileSize=round($limit_size/1000, 0);
$unitFile="KB";
}else{
$textFileSize=round($limit_size, 0);
$unitFile="Byte";
}
// echo $textFileSize." ".$unitFile;
$canUpload=0;
if($file["size"]<=$limit_size){
$canUpload=1;
if(@in_array($ext,$allowed_types)){
$canUpload=1;
if($fileupload1!="" && $canUpload==1){
$status=1;
@move_uploaded_file($fileupload1,$filelocate.$file_up);
@chmod($filelocate.$file_up,0777);
$error_msg="";
}else{
$status=2;
$file_up="";
$error_msg="เกิดข้อผิดพลาด กรุณาลองใหม่ อีกครั้ง";
}
}else{
$status=3;
$canUpload=0;
$file_allowed_types = implode(",", $allowed_types);
$error_msg="อนุญาตอัพโหลดเฉพาะไฟล์ $file_allowed_types เท่านั้น";
}
}else{
$status=4;
$canUpload=0;
$error_msg="ขนาดไฟล์ต้องไม่เกิน $textFileSize $unitFile";
}
}else{
$status=5;
$error_msg="กรุณาเลือกไฟล์ที่ต้องการอัพโหลด";
}
$arr_file_up['error']=$error_msg;
$arr_file_up['name']=$file_up;
$arr_file_up['size']=$file["size"];
$arr_file_up['status']=$status;
return $arr_file_up; // ส่งกลับ array ข้อมูล
}
?>
การใช้งาน
// การใช้งานฟังก์ชั่น สำหรับ upfile แบบกำหนดเงื่อนไข
//$UpFile=upfile_only(ชื่อ fileupload,โฟลเดอร์ที่ต้องการเก็บ,ขนาดไฟล์ 1000=1kb);
$UpFile=upfile_only($_FILES['file_upload'],"fileplace/",500000);
// $UpFile จะรับค่า array ที่ได้จากการใช้งานฟังก์ชั่น
// เราสามารถเอาค่าที่ได้ไปตรวจสอบหรือทำงานส่วนอื่นต่อได้
// $UpFile['name'] // ชื่อไฟล์
// $UpFile['error'] // ข้อความแจ้ง ถ้าไม่มี error ค่าจะเป็นว่าง
// $UpFile['status'] // สถานะต่างๆ เป็นตัวเลข 1-5 โดย 1 คือ อัพโหลดสมบูรณ์
// $UpFile['size'] // ขนาดของไฟล์ byte
จะเห็นว่าฟังก์ชั่นการอัพโหลดไฟล์ เราสามารถกำหนดนามสกุลไฟล์ที่อนุญาตได้
กำหนดขนาดของไฟล์ที่สามารถอัพโหลดได้
ต่อไป มาดูส่วนของโค้ดเต็ม ของบทความนี้
จะมีไฟล์สองไฟล์ คือไฟล์หลัก สมมติชื่อ test_upfile_iframe.php
และไฟล์ที่ใช้ใน iframe ชื่อ upfile.php
คำอธิบาย แสดงในโค้ด
test_upfile_iframe.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#placeupload{
width:1px;height:1px;visibility:hidden;
}
</style>
</head>
<body>
<br><br>
<div style="margin:auto;width:800px;">
<!--target="placeupload" -->
<iframe id="placeupload" name="placeupload"></iframe>
<form action="upfile.php" target="placeupload" method="post" enctype="multipart/form-data" name="form5" id="form5">
<input type="text" name="mytext" id="mytext" value="" /><br><br>
<input type="file" name="file_upload" id="file_upload" />
<input type="submit" name="bt_upload" id="bt_upload" value="Submit" />
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
});
// ฟังก์ชั่นสำหรับตรวจสอบการอัพโหลดผ่าน iframe
// checkUpload(ชื่อไฟล์ที่ได้,ข้อความ error ถ้ามี,สถานะการอัพไฟล์,ขนาดไฟล์,สถานะการทำงานทั้งหมด){
function checkUpload(upfile,error,status,filesize,total_status){
if(total_status==1 && status==1 && error==""){
alert("บันทึกข้อมูลเรียบร้อยแล้ว");
$("#form5")[0].reset();
}else{
if(error!=""){
if(status==2 || status==3 || status==4 || status==5){
alert(error);
$("#file_upload").val("");
}
}
}
// alert(upfile);
// alert(error);
// alert(status);
// alert(filesize);
// alert(total_status);
}
</script>
</body>
</html>
คำอธิบาย แสดงในโค้ด
upfile.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อกับฐานข้อมูล
$link=mysql_connect("localhost","root","test"); // เชื่อมต่อ Server
mysql_select_db("test"); // ติดต่อฐานข้อมูล
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
// function up file
function upfile_only($file,$filelocate,$limit_size=2000000){
$allowed_types=array("doc","pdf","txt");
$error_msg="";
$status=0;
$arr_file_up=array();
if($file["name"]!=""){
$fileupload1=$file["tmp_name"];
$g_file=explode(".",$file["name"]);
$ext = strtolower(array_pop($g_file));
$file_up=time().date("Ymd").".".$ext; // กำหนดรุปแบบชื่อไฟล์
$unitFile="";
$textFileSize="";
if($limit_size>=1000000){
$textFileSize=round($limit_size/1000000, 0);
$unitFile="MB";
}elseif($limit_size>=1000){
$textFileSize=round($limit_size/1000, 0);
$unitFile="KB";
}else{
$textFileSize=round($limit_size, 0);
$unitFile="Byte";
}
// echo $textFileSize." ".$unitFile;
$canUpload=0;
if($file["size"]<=$limit_size){
$canUpload=1;
if(@in_array($ext,$allowed_types)){
$canUpload=1;
if($fileupload1!="" && $canUpload==1){
$status=1;
@move_uploaded_file($fileupload1,$filelocate.$file_up);
@chmod($filelocate.$file_up,0777);
$error_msg="";
}else{
$status=2;
$file_up="";
$error_msg="เกิดข้อผิดพลาด กรุณาลองใหม่ อีกครั้ง";
}
}else{
$status=3;
$canUpload=0;
$file_allowed_types = implode(",", $allowed_types);
$error_msg="อนุญาตอัพโหลดเฉพาะไฟล์ $file_allowed_types เท่านั้น";
}
}else{
$status=4;
$canUpload=0;
$error_msg="ขนาดไฟล์ต้องไม่เกิน $textFileSize $unitFile";
}
}else{
$status=5;
$error_msg="กรุณาเลือกไฟล์ที่ต้องการอัพโหลด";
}
$arr_file_up['error']=$error_msg;
$arr_file_up['name']=$file_up;
$arr_file_up['size']=$file["size"];
$arr_file_up['status']=$status;
return $arr_file_up; // ส่งกลับ array ข้อมูล
}
///////////////////
if(isset($_POST['bt_upload'])){
// การใช้งานฟังก์ชั่น สำหรับ upfile แบบกำหนดเงื่อนไข
//$UpFile=upfile_only(ชื่อ fileupload,โฟลเดอร์ที่ต้องการเก็บ,ขนาดไฟล์ 1000=1kb);
$UpFile=upfile_only($_FILES['file_upload'],"fileplace/",500000);
// $UpFile จะรับค่า array ที่ได้จากการใช้งานฟังก์ชั่น
// เราสามารถเอาค่าที่ได้ไปตรวจสอบหรือทำงานส่วนอื่นต่อได้
// $UpFile['name'] // ชื่อไฟล์
// $UpFile['error'] // ข้อความแจ้ง ถ้าไม่มี error ค่าจะเป็นว่าง
// $UpFile['status'] // สถานะต่างๆ เป็นตัวเลข 1-5 โดย 1 คือ อัพโหลดสมบูรณ์
// $UpFile['size'] // ขนาดของไฟล์ byte
// echo "<pre>";
// print_r($UpFile);
// echo "</pre>";
$total_status=0;
// ถ้าอัพเดทข้อมูลอื่นๆ เช่น เพิ่มข้อมูลลงฐานข้อมูลสำเร็จให้กำหนดค่า
// $total_status=1;
if($UpFile['status']==1){ // ถ้าอัพไฟล์สำเร็จ
// ทำงานคำสั่งอื่น เช่น การบันทึกลงฐานข้อมูล
$total_status=1;
}
?>
<script type="text/javascript">
// ส่งค่ากลับไปที่ เพจหลัก
parent.checkUpload('<?=$UpFile['name']?>'
,'<?=$UpFile['error']?>'
,'<?=$UpFile['status']?>'
,'<?=$UpFile['size']?>'
,'<?=$total_status?>');
</script>
<?php
}
?>
เนื้อหาที่เกี่ยวข้อง