<!-- เรียกใช้งาน jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<!-- สร้างฟอร์ม Upload -->
<form id="upload_form" method="post">
<!-- สร้าง input ตัวเลือกไฟล์ -->
<input type="file" id="my_file" name="my_file" />
<!-- สร้างปุ่ม Upload โดยหากกด ปุ่ม upload จะ ไปทำงานที่ function ชื่อ save_upload() -->
<button type="button" onclick="save_upload()" >Upload</button>
<!-- แสดงข้อความแจ้งเตือน หากไฟล์ไม่ใช่รูปภาพ-->
<div id="err_div" style="color: red" ></div>
<br />
<!-- แสดงสถานะการ Upload ที่เสร็จแล้วกี่ %-->
<div id="upload_status_bar" ></div>
</form>
<script>
function save_upload()
{
var file_name= $("#my_file").val().toLowerCase();//เปลี่ยนชื่อไฟล์เป็น ตัวพิพม์เล็ก
//check ประเภทไฟล์
if( (file_name.indexOf(".jpg")==-1)&&(file_name.indexOf(".jpeg")==-1)&&(file_name.indexOf(".png")==-1)&&(file_name.indexOf(".gif")==-1) )
{
$("#err_div").html("Not picture file !");//แจ้งเตือนหากไฟล์ไม่ใช่ไฟล์รูปภาพ
return;
}
//-----------upload ไฟล์ ---------
var fd = new FormData(document.getElementById("upload_form"));//สร้าง object ไฟล์ เพื่อส่งไป Upload
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
//แสดง % ที่เสร็จแล้ว
$("#upload_status_bar").html("<h4>"+percentComplete+"%</h4>");
}
}, false);
return xhr;
},
url: "upload.php",//ไฟล์ที่ใช้ upload
type: "POST",
data: fd,//Object ไฟล์ที่ Upload
enctype: 'multipart/form-data',
processData: false,
contentType: false
}).done(function( response ) { //response คือ ข้อมูลที่ส่งกลับมา ที่ส่งกลับมา
//clear สถานะการ upload
$("#upload_status_bar").html("");
//clear input ไฟล์ที่เลือก
$("#my_file").val('');
});
//-----------upload ไฟล์ ---------
}
</script>
ไฟล์ upload.php ซึ่งคือ ไฟล์ที่ใช้ Upload ฝั่ง server
<?php
$file=$_FILES["my_file"];//เก็บไฟล์ที่ upload มาไว้ในตัวแปร $file
copy($file["tmp_name"],$file["name"]);//ย้ายไฟล์มาที่ server
echo "ok"; //ส่ง text ok กลับไปที่ client
?>
