รับเขียนโปรแกรม: Upload ไฟล์แบบ Ajax แสดงสถานะเป็นเปอร์เซ็น ( แบบไม่ใช้ jquery ไม่ใช้ framework ไม่ใช้ไลบรารี่ javascript อย่างเดียว )

ในการพัฒนา Web Application ทุกวันนี้เรามักจะส่งข้อมูลให้ Server ด้วยวิธี Ajax การ Upload File ขึ้นสู่ Server ก็เช่นกัน เราสามารถ Upload ไฟล์แบบ Ajax โดยแสดงสถานะการ Uplaod เป็นเปอร์เซ็นได้โดยไม่ต้องใช้ Framework ใดๆ โดยใช้แค่ javascript เพียงอย่างเดียวดังนี้

รับเขียนโปรแกรม Ajax

<html>
<body>

    <input type="file" id="upload-file" />
    <button id="upload-button">Upload</button>
    <div id="upload-percentage"></div>

    <script>
        //------กำหนดชุดคำสั่งเมื่อคลิกปุ่ม Upload---------
        document.querySelector('#upload-button').addEventListener('click', function() {

            //-----สร้าง Object เก็บข้อมูลที่จะส่งไปที่ server
            var data = new FormData();
            //----เพิ่มไฟล์ที่ต้องการ Upload ลงใน Object ที่จะส่งไปที่ Server
            data.append('file', document.querySelector('#upload-file').files[0]);
            //----สร้าง Object สำหรับส่งข้อมูลแบบ Ajax----
            var request = new XMLHttpRequest();
            //------กำหนดชุดคำสั่งเมื่อทำ Upload ไฟล์เสร็จแล้ว
            request.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //----แสดง Text ข้อความที่ส่งกลับมาจาก Server
                    document.querySelector("#upload-percentage").innerHTML = request.responseText;
                }
            };

            //--------คำนวนเปอร์เซ็นที่ Upload เสร็จแล้ว-------
            request.upload.addEventListener('progress', function(e) {

                var percent_complete = (e.loaded / e.total)*100;
                document.querySelector("#upload-percentage").innerHTML = percent_complete+"%";

            });
            //------กำหนดให้ส่งไฟล์แบบ POST ไปที่ไฟล์ upload.php
            request.open('post', 'upload.php');
            request.send(data);

        });

    </script>

</body>
</html>

ฝั่ง Server ใช้ PHP ดังนี้
<?php

    $file=$_FILES["file"];//รับไฟล์จาก Client Browser

    copy($file["tmp_name"],$file["name"]);

    echo "Upload File Success";//ส่งข้อความกลับ

?>

fb_ads

Upload ไฟล์แบบ Ajax แสดงสถานะเป็นเปอร์เซ็น ( แบบไม่ใช้ jquery ไม่ใช้ framework ไม่ใช้ไลบรารี่ javascript อย่างเดียว )