PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

16 September 2014 By


เมื่อมี 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>

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

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

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


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



การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลด ดูที่กระทู้นี้ http://www.ninenik.com/forum_view_1171_1.html


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