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

27 March 2015 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

iframe อัพไฟล์

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

เนื้อหาในบทความนี้ เป็นแนวทาง การประยุกต์ และสร้างฟังก์ชั่นใช้งาน

ให้สะดวกมากขึ้น สามารถนำบางส่วนไปดัดแปลง ประยุกต์ต่อยอดเพิ่มเติม

เนื้อหาดัดแปลงมาจากบทความ

เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป

http://www.ninenik.com/content.php?arti_id=306 via @ninenik

และ

javascript เรียกฟังก์ชัน ใน parent จาก iframe

http://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
}
?>

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

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

25 Sep
2008

Upload รูปภาพ หรือไฟล์ด้วย ฟังก์ชั่น ใช้ง่าย อ่าน 37,405
เป็นฟังก์ชันสำหรับทำการอัพโหลดไฟล์ไปไว้ที่ๆ ต้องการ โดยฟังก์ชั่นจะคืนค่า ชื่อขอ
15 Feb
2013

สร้างฟังก์ชันสำหรับอัพโหลดรูป แบบกำหนดเงื่อนไข อย่างง่าย อ่าน 20,291
เนื้อหาต่อไปนี้ จะเป็นตัวอย่างการใช้งานฟังก์ชั่น สำหรับอัพโหลดรูปภาพ
19 Nov
2014

สร้างฟังก์ชันสำหรับอัพโหลดวิดีโอ video แบบกำหนดขนาดไฟล์ได้ อ่าน 6,383
พิเศษ เฉพาะสมาชิก ฟังก์ชั่นตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับใช้ในการอัพโหลด วิดีโอไฟล์ โดยท
กำลังอ่านเนื้อหานี้อยู่

27 Mar
2015

อัพโหลด และตรวจสอบไฟล์ พร้อม ส่งค่าข้อมูล form ผ่าน iframe อ่าน 7,341
พิเศษ เฉพาะสมาชิก เนื้อหาในบทความนี้ เป็นแนวทาง การประยุกต์ และสร้างฟังก์ชั่นใช้งาน ให้สะดว

Tags:: อัพไฟล์ iframe

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

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

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

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

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

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน