PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

27 March 2015 By


เนื้อหาในบทความนี้ เป็นแนวทาง การประยุกต์ และสร้างฟังก์ชั่นใช้งาน
ให้สะดวกมากขึ้น สามารถนำบางส่วนไปดัดแปลง ประยุกต์ต่อยอดเพิ่มเติม
เนื้อหาดัดแปลงมาจากบทความ
 
เทคนิค ประยุกต์ใช้ 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;
                    @copy($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;
                    @copy($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
}
?>
 

Tags:: iframe อัพไฟล์

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

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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