ตัวอย่างการใช้ jQuery upload ไฟล์แบบ ajax
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery: form > send file</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
.progressbar {
background: #c00000;
clear: both;
height: 10px;
width: 0;
}
.progressLoaded {
width: 50px;
}
.progressLoaded::after {
content: " bytes";
}
.progressPercent {
width: 50px;
}
.progressPercent::after {
content: " %";
}
.progressTotal {
float: left;
width: 50px;
}
.progressTotal::after {
content: " bytes";
}
.progressTotal::before {
content: " of ";
}
</style>
</head>
<body>
<h1>upload file with ajax</h1>
<form action="values.php" class="form-horizontal" enctype="multipart/form-data" id="formA" method="post">
<div class="form-group">
<label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
<div class="col-sm-10">
<input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="photoI">ภาพถ่าย</label>
<div class="col-sm-10">
<input class="form-control" id="photoI" name="photo" placeholder="upload file" type="file">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 text-right">
<button type="submit" class="btn btn-success">ส่งข้อมูล</button>
</div>
</div>
</form>
<div class="col-sm-12">
<h4>Progress</h4>
<div class="progressLoaded"></div>
<div class="progressTotal"></div>
<div class="progressPercent"></div>
<div class="progressbar"></div>
</div>
<div class="col-sm-12" id="resultA"></div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script>
function xhrProgress (xhr) {
if (xhr.upload) {
// For handling the progress of the upload
xhr.upload.addEventListener ('progress', function (e) {
if (e.lengthComputable) {
$ ('.progressTotal') .html (e.total) ;
$ ('.progressLoaded') .html (e.loaded) ;
percentComplete = parseInt ( (e.loaded / e.total * 100) , 10) ;
$ ('.progressPercent') .html (percentComplete) ;
$ ('.progressbar') .css ("width", percentComplete + '%') ;
}
}, false) ;
}
return xhr;
}
$ (function () {
var formA = $ ('#formA') ;
formA.submit (function (event) {
event.preventDefault () ;
$.ajax ({
"beforeSend": function (jqXHR, settings) {
/* แยกตัวแปรไว้ตรวจสอบข้อมูล */
var params = settings.data;
if (settings.data.get ('socialid') == '') {
jqXHR.abort () ;
alert ('กรุณากรอกหมายเลขบัตรประชาชน') ;
return false;
}
if (settings.data.get ('photo') .name == '') {
jqXHR.abort () ;
alert ('กรุณาอัพโหลดรูปภาพ') ;
return false;
}
},
"contentType": false,
"data": new FormData (formA[0]) ,
"method": "POST",
"processData": false,
"success": function (data, textStatus, jqXHR) {
$ ('#resultA') .html (data) ;
},
"url": "values.php",
"xhr": function () {
return xhrProgress ($.ajaxSettings.xhr ()) ;
},
}) ;
}) ;
}) ;
</script>
</body>
</html>
ไฟล์ที่รอรับข้อมูล
<?php echo 'FILE<pre>', print_r ($_FILES, true) , '</pre>'; echo 'GET<pre>', print_r ($_GET, true) , '</pre>'; echo 'POST<pre>', print_r ($_POST, true) , '</pre>';
วิธีนี้ใช้ความสามารถใหม่ FormData ที่ใช้กับ browser เก่าแก่กว่า Internet Explorer 10 หรือ Edge ไม่ได้ ดูเพิ่มเติม