อัพโหลด และตรวจสอบไฟล์ พร้อม ส่งค่าข้อมูล form ผ่าน iframe

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
อัพไฟล์ iframe

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ อัพไฟล์ iframe

ดูแล้ว 8,487 ครั้ง


เนื้อหาในบทความนี้ เป็นแนวทาง การประยุกต์ และสร้างฟังก์ชั่นใช้งาน
ให้สะดวกมากขึ้น สามารถนำบางส่วนไปดัดแปลง ประยุกต์ต่อยอดเพิ่มเติม
เนื้อหาดัดแปลงมาจากบทความ
 
เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป 
 
และ
 
javascript เรียกฟังก์ชัน ใน parent จาก iframe 
 
หลักการทำงาน คือ เรามีฟอร์มหนึ่ง ที่มี textbox และ input file ซึ่งเราจะให้ทำงาน
พร้อมกันทั้งการส่งค่า textbox และ อัพโหลดไฟล์ โดยที่ไม่ต้องให้มีการ เปลี่ยนไปหน้า
ใหม่หรือ reload เพจ โดยอาศัยวิธีการส่งค่าผ่าน iframe
 
ขอแยกสั่งที่ได้จากการประยุกต์ เราได้ฟังก์ชั่น php อย่างง่ายสำหรับอัพโหลดไฟล์
ดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?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 ข้อมูล
} 
?>
 
การใช้งาน
 
1
2
3
4
5
6
7
8
9
// การใช้งานฟังก์ชั่น สำหรับ 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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?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
}
?>
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: อัพไฟล์ iframe




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ