แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
html5 อัพโหลด preview

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





เมื่อมี html5 เข้ามา ทำให้การแสดงตัวอย่าง รูปภาพ ก่อนการอัพโหลด
ทำได้โดยง่าย โค้ดตัวอย่างนี้ เป็นการประยุกต์เล็กน้อย จากโค้ดหลายๆ ที่
มารวมกัน ต้ดความสามารถที่ยังไม่สมบูรณ์ออก
 
สิ่งที่ตัวอย่างทำได้คือ แสดงตัวอย่างไฟล์รูปภาพที่เลือกก่อน ทำการอัพโหลด
สามารถเลือกไฟล์ ที่จะอัพโหลดได้หลายๆ ไฟล์ โดยกด ctrl หรือ shift เพื่อเลือกรายการรูปภาพ
 
ตัวอย่าง
 

บันทึกข้อมูล

Name :
Picture :
Upload File

 
ไฟล์ show_data.php ดูผลตัวอย่างการส่งค่า รับค่าตัวแปร $_FILES ไปใช้
 
<pre>
<?php
print_r($_POST);
echo "<br>";
echo "<br>";
print_r($_FILES);
?>
</pre>
 
ไฟล์ index.html ไฟล์โค้ดตัวอย่าง
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        canvas{border:1px solid red;}    
    </style>
</head>
<body>

    <br>  
    <div style="margin:auto;width:80%;">  
        <h3> บันทึกข้อมูล</h3>   
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">    
            <div class="form-group">  
               <lable class="control-label">Name : </lable>  
                <input type="text" autocomplete="off" class="form-control" name="name">  
            </div>  
            <div class="form-group">  
               <lable class="control-label">Picture : </lable>  
               <input id="file_upload" style="display:none" name="file_upload[]" type="file" multiple="true">  
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>               
            </div>  
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>             
        </form>  
        <br>  
        
    </div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript" >
$(function () {


    $("#upload").on("click",function(e){
        $("#file_upload").show().click().hide();
        e.preventDefault();
    });
    $("#file_upload").on("change",function(e){
        var files = this.files
        showThumbnail(files)        
    });

    function showThumbnail(files){

        $("#thumbnail").html("");
        for(var i=0;i<files.length;i++){
            var file = files[i]
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }

            var image = document.createElement("img");
            var thumbnail = document.getElementById("thumbnail");
            image.file = file;
            thumbnail.appendChild(image)

            var reader = new FileReader()
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))

            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop

    } // end showThumbnail


    
    
});
 </script>    
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017


การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลด ดูที่กระทู้นี้ 


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 07-12-2017


ตัวอย่างโค้ด การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลดพร้อมกันได้ 
ปรับเรื่องการไม่สร้าง input file ใหม่ถ้ายังไม่เลือก ป้องกันรายการที่ไม่ได้เลือกไฟล์ ดูตัวอย่างประกอบได้ที่
demo 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        #thumbnail div.removepic:hover{
            display:inline-block;
            border:1px dashed red;
        }
        canvas{border:1px solid red;}    
    </style>
</head>
<body>
 
    <br>  
    <div style="margin:auto;width:80%;">  
        <h3> บันทึกข้อมูล</h3>   
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">    
            <div class="form-group">  
               <lable class="control-label">Name : </lable>  
                <input type="text" autocomplete="off" class="form-control" name="name">  
            </div>  
            <div class="form-group">  
               <lable class="control-label">Picture : </lable>  
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>               
            </div>  
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>             
        </form>  
        <br>  
         
    </div>
 
 
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(function () {
 
 
    $("#upload").on("click",function(e){
		var lastFile = $(".file_upload:last").length;
		if(lastFile >= 0){
			if(lastFile == 0 || $(".file_upload:last").val()!=""){
				var objFile= $("<input>",{
				   "class":"file_upload",
					"type":"file",
					"multiple":"true",
					"name":"file_upload[]",
					"style":"display:none",
						change: function(e){
							var files = this.files
							showThumbnail(files)    
						}
				});	
				$(this).before(objFile);		
				$(".file_upload:last").show().click().hide();					
			}else{
				$(".file_upload:last").show().click().hide();		
			}			
		}
        e.preventDefault();
    });
 
    function showThumbnail(files){
 
    //    $("#thumbnail").html("");
        for(var i=0;i<files.length;i++){
            var file = files[i]
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }
 
            var image = document.createElement("img");
            var thumbnail = document.getElementById("thumbnail");
            image.file = file;
            thumbnail.appendChild(image);
 
            var reader = new FileReader();
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))
 
            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop
 
    } // end showThumbnail
 
 
     
     
});
 </script>    
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 23-02-2020


โค้ดตัวอย่างการประยุกต์ รองรับการลบรายการ

    ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม โดยสามารถเลือกลบรายการ โดยคลิกที่รูปพรีวิว
ที่ต้องการลบได้ โดยเงื่อนไข คือ ต้องตัดการกำหนดแบบ multiple ออก นั่นคือจะเลือกรูปได้ที่ละ
1 รูปแต่สามารถเลือกหลายครั้งได้ โดยยังอัพโหลดได้ที่ละหลายรูป แต่แค่เลือกรูปได้ครั้งละ 1 รูปนั่นเอง
    เหตุผลเพื่อให้สามารถลบลูปที่ต้องการได้ง่ายขึ้น ตัวอย่างโค้ดดังด้านล่าง และดูตัวอย่างที่ DEMO 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail,div.removepic{
            display: flex;
            flex-wrap: wrap;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        #thumbnail div.removepic:hover{
            display:inline-block;
            border:1px dashed red;
        }
        canvas{border:1px solid red;}    
    </style>
</head>
<body>
  
    <br>  
    <div style="margin:auto;width:80%;">  
        <h3> บันทึกข้อมูล</h3>   
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">    
            <div class="form-group">  
               <lable class="control-label">Name : </lable>  
                <input type="text" autocomplete="off" class="form-control" name="name">  
            </div>  
            <div class="form-group">  
               <lable class="control-label">Picture : </lable>  
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>               
            </div>  
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>             
        </form>  
        <br>  
          
    </div>
  
  
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(function () {
  
  
    $("#upload").on("click",function(e){
        var lastFile = $(".file_upload:last").length;
        if(lastFile >= 0){
            if(lastFile == 0 || $(".file_upload:last").val()!=""){
                var objFile= $("<input>",{
                   "class":"file_upload",
                    "type":"file",
                    "name":"file_upload[]",
                    "style":"display:none",
                        change: function(e){
                            var files = this.files
                            showThumbnail(files)    
                        }
                }); 
                $(this).before(objFile);        
                $(".file_upload:last").show().click().hide();                   
            }else{
                $(".file_upload:last").show().click().hide();       
            }           
        }
        e.preventDefault();
    });
  
    function showThumbnail(files){
  
    //    $("#thumbnail").html("");
        for(var i=0;i<files.length;i++){
            var file = files[i]
            var fileName = file.name;
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }
  
            var image = document.createElement("img");
            var wrapImg = document.createElement("div");
            var thumbnail = document.getElementById("thumbnail");
            wrapImg.className = 'removepic';
            wrapImg.setAttribute("data-file", fileName);
            image.file = file;
            wrapImg.appendChild(image);
            thumbnail.appendChild(wrapImg);
  
            var reader = new FileReader();
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))
  
            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop
  
    } // end showThumbnail
  
    // ส่วนจัดการ การลบรูปที่ไม่ต้องการอัพโหลด จากการกดที่
    // หรือคลิกที่รูปที่ต้องการลบ 
    $(document.body).on("click","div.removepic",function(){
        var removeFileName = $(this).data("file");
        var files = $("input.file_upload");
        var filesLength = files.length;
        for(var f = 0; f < filesLength; f++){
            var fileLists = files[f].files;
            if(fileLists !== undefined){
                for(var fl = 0; fl < fileLists.length; fl++){
                    if(fileLists[fl].name === removeFileName) {
                        $(files[f]).remove();
                        break;
                    }                    
                }
            };
        }   
        $(this).remove();
    });
      
    // จำลองแสดงข้อมูลชื่อไฟล์ ที่จะทัำการอัพโหลด 
    // ส่วนนี้หากใช้งานจริง ตัดออกได้ หากไม่ได้ส่งข้อมูลแบบ ajax
    // เอาไว้ดูว่าไฟล์ที่จะอัพโหลดถูกต้องหรือไม่ ในขั้นตอนการทดสอบ
    $("form#myFrom").submit(function(e){
		e.preventDefault();
        var files = $("input.file_upload");
        var filesLength = files.length;
        for(var f = 0; f < filesLength; f++){
            var fileLists = files[f].files;
            if(fileLists !== undefined){
                for(var fl = 0; fl < fileLists.length; fl++){
                    console.log(fileLists[fl].name);                  
                }
            };
        }   
    });
      
});
 </script>    
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 4 วันที่ 23-02-2020


โค้ดตัวอย่างการประยุกต์ รองรับการลบรายการ วิธีที่ 2

    ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม โดยสามารถเลือกลบรายการ โดยคลิกที่รูปพรีวิว
ที่ต้องการลบได้ ยังใช้งานการเลือกรูปทีละหลายๆ รูปได้ โดยคง multiple เป็น true ไว้ แนวทางที่ใช้
คือ เมื่อเลือกรายการที่จะลบ จะทำการสร้าง input hidden ชื่อ remove_file เพื่อส่งไปกับฟอร์มใน
ขั้นตอนการอัพโหลด แล้วใช้เงื่อนไขในฟังก์ server เลือกเฉพาะรูปที่ไม่อยู่ใน remove_file เงื่อนไขไฟล์
show_data.php แนวทางจะเป็นดังนี้
 
<pre>
<?php
print_r($_POST);
echo "<br>";
echo "<br>";
//print_r($_FILES);
if(isset($_FILES['file_upload'])){
	$arr_removeFiles = array();	
	if(isset($_POST['remove_file'])){
		$arr_removeFiles = $_POST['remove_file'];
	}
	$totalFile = count($_FILES['file_upload']['name']); // จำนวนไฟล์ทั้งหมด
	for($i = 0; $i < $totalFile; $i++){// วนลูปอัพโหลดไฟล์
		$fileName = $_FILES['file_upload']['name'][$i];
		$fileUpload = $_FILES['file_upload']['tmp_name'][$i];
		if(!in_array($fileName, $arr_removeFiles)){ // อัพโหลดเฉพาะไฟล์ ที่ไม่ได้ลบ
			echo "Upload: ".$fileName."<br>";	
		}
	}
}
?>
</pre>
 
วิธีการนี้คือ สมมติเราเลือกไฟล์ a.jpg b.jpg และ c.jpg แล้ว ด้วยรูปแบบการใช้งาน input file แบบ multiple เรา
ไม่สามารถแก้ไขไฟล์ที่เลือกไปแล้วได้ จึงใช้วิธีส่งชื่อไฟล์ไปทั้ง แล้วเก็บชื่อไฟล์ที่ต้องการลบ เมื่อเลือกรูปที่ต้องการ
ลบไว้ใน input hidden  พอเราส่งชื่อไฟล์ที่จะอัพโหลดทั้งหมดก่อนลบ และชื่อไฟล์ที่จะลบไปใช้งานใน ฝั่ง server
ก็ใช้คำสัง php ในการกำหนดเงื่อนไข ให้ทำการอัพโหลดเฉพาะรูปหรือไฟล์ที่ไม่อยู่ในรายการที่จะลบนั่นเอง
 
ไฟล์ ทดสอบกรณีนี้ดูตัวอย่างใน DEMO 3 
ทั้ง 3 DEMO จะคล้ายๆ กัน แต่จะมีเงื่อนไขและรูปแบบการทำงานและการใช้งานที่แตกต่างกัน
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail,div.removepic{
            display: flex;
            flex-wrap: wrap;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        #thumbnail div.removepic:hover{
            display:inline-block;
            border:1px dashed red;
        }
        canvas{border:1px solid red;}    
    </style>
</head>
<body>
  
    <br>  
    <div style="margin:auto;width:80%;">  
        <h3> บันทึกข้อมูล</h3>   
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">    
            <div class="form-group">  
               <lable class="control-label">Name : </lable>  
                <input type="text" autocomplete="off" class="form-control" name="name">  
            </div>  
            <div class="form-group">  
               <lable class="control-label">Picture : </lable>  
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>               
            </div>  
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>             
        </form>  
        <br>  
          
    </div>
  
  
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(function () {
  
  
    $("#upload").on("click",function(e){
        var lastFile = $(".file_upload:last").length;
        if(lastFile >= 0){
            if(lastFile == 0 || $(".file_upload:last").val()!=""){
                var objFile= $("<input>",{
                   "class":"file_upload",
                    "type":"file",
                    "multiple":"true",                    
                    "name":"file_upload[]",
                    "style":"display:none",
                        change: function(e){
                            var files = this.files
                            showThumbnail(files)    
                        }
                }); 
                $(this).before(objFile);        
                $(".file_upload:last").show().click().hide();                   
            }else{
                $(".file_upload:last").show().click().hide();       
            }           
        }
        e.preventDefault();
    });
  
    function showThumbnail(files){
  
    //    $("#thumbnail").html("");
        for(var i=0;i<files.length;i++){
            var file = files[i]
            var fileName = file.name;
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }
  
            var image = document.createElement("img");
            var wrapImg = document.createElement("div");
            var thumbnail = document.getElementById("thumbnail");
            wrapImg.className = 'removepic';
            wrapImg.setAttribute("data-file", fileName);
            image.file = file;
            wrapImg.appendChild(image);
            thumbnail.appendChild(wrapImg);
  
            var reader = new FileReader();
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))
  
            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop
  
    } // end showThumbnail
  
    // ส่วนจัดการ การลบรูปที่ไม่ต้องการอัพโหลด จากการกดที่
    // หรือคลิกที่รูปที่ต้องการลบ 
    $(document.body).on("click","div.removepic",function(){
        var removeFileName = $(this).data("file");
        var files = $("input.file_upload");
        var filesLength = files.length;
        for(var f = 0; f < filesLength; f++){
            var fileLists = files[f].files;
            if(fileLists !== undefined){
                for(var fl = 0; fl < fileLists.length; fl++){
                    if(fileLists[fl].name === removeFileName) {
                        var removeImg = $("<input>",{
                             "type":"hidden",                 
                             "name":"remove_file[]",
                             "value":removeFileName
                         }); 
                        $(files[f]).after(removeImg);
                        break;
                    }                    
                }
            };
        }   
        $(this).remove();
    });
      
      
});
 </script>    
</body>
</html>






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







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



Tags:: อัพโหลด preview html5




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

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

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

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



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




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












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