GORAGOD.com

โค้ดนี้จะเป็นการใช้ GForm ในการทำอัปโหลดแบบ Ajax ซึ่งจริงๆแล้วเราก็สามารถเขียนฟอร์มได้เหมือนกับฟอร์มทั่วๆไปเหมือนเดิมครับ และหากเราใช้รูปรอโหลด เราก็จะสามารถใช้งานได้คล้ายๆ Upload Progressbar เลยทีเดียว

<img id="imgupload" alt="image upload" src="test.jpg" />

<form id="frm_upload" action="upload.php" method="post">
<p class="h"><span>อัปโหลด</span><span id="wait" style="visibility: hidden;color:red;">Loading...</span></p>
<p><label for="file">ฺBrowser :</label><input type="file" id="file" name="file" size="40" maxlength="20" /></p>
<p><input id="submit" type="submit" value="อัปโหลด" /></p>
</form>

โค้ดฟอร์มครับ ไม่ีมีอะไรแตกต่างจากฟอร์มทั่วไป และไม่ต้องกำหนด encoding ด้วย
imgupload เป็น tag img สำหรับแสดงรูปดาวน์โหลดที่ได้อัปโหลดไปแล้ว

<script type="text/javascript">
new GForm('frm_upload', false, 'wait', false).onsubmit(doUpload);
</script>

Javascript ในส่วนของฟอร์มเมื่อ submit ต้องเอาไว้ในหน้าเดียวกับฟอร์มนะครับ

<?php
    if (!in_array($_FILES[file][type], array('image/pjpeg', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png'))) {
        $ret[] = 'error":"ชนิดของไฟล์ ไม่ถูกต้อง';
    } elseif ($_FILES[file][size] > 200 * 1024) {
        $ret[] = 'error":"ขนาดของไฟล์ มากกว่า 200 kb.';
    } else {
        copy($_FILES[file][tmp_name], 'test.jpg');
        $ret[] = 'error":"อัปโหลดเรียบร้อย';
        $ret[] = 'image":"test.jpg?'.time();
    }
    // คืนค่าเป็น JSON
    echo '[{"'.implode('","', $ret).'"}]';
?>

โค้ด upload.php ที่ทำการอัปโหลดไป ซึ่งสามารถเขียนคำสั่งอัปโหลดได้เหมือนฟอร์ม ปกติธรรมดา ในตัวอย่างมีการตรวจสอบชนิดและ ขนาดของไฟล์อัปโหลด ถ้าไม่ถูกต้อง จะคืน error กลับ ถ้าถูกต้อง จะคืนชื่อไฟล์ที่อัปโหลดกลับมาด้วย โดยใช้การส่งค่ากลับแบบ JSON

<script type="text/javascript">
var doUpload = function(xhr){
    try {
        var datas = xhr.responseText.toJSON();
        if (datas[0].error) {
            alert(datas[0].error); // มี error ส่งกลับมา
        };
        if (datas[0].image) {
            $E('imgupload').src = datas[0].image; // มี image ส่งกลับมา
        };
    } catch (e) {
        alert(xhr.responseText); // ถ้าข้อความที่ return มา ไม่ใช่ JSON
    };
};
</script>

doUpload ฟังก์ชั่น Javascript สำหรับรับค่าจากฟอร์ม เมื่อ submit ไปเรียบร้อยแล้วและตอบกลับมา ซึ่งสามารถแยกออกเป็นไฟล์ js ได้ครับ เป็นการจัดการกับข้อความ JSON ที่ส่งกลับมาเพื่อแสดงข้อความ alert() หรือ หากมีการส่ง datas[0].image กลับมาด้วย ก็ให้ไปแสดงรูป

ตัวอย่าง