本文執行個體講述了jquery+ajax實作上傳圖檔并顯示上傳進度功能。分享給大家供大家參考，具體如下：
jquery上傳檔案用的formdata，上傳進度條需要添加xhr的onprogress
html代碼如下：
Ding Jianlong Html
總大小；已上傳；
選擇檔案：
var uploading = false;
function upload(){
//首先封裝一個方法 傳入一個監聽函數 傳回一個綁定了監聽函數的XMLHttpRequest對象
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //綁定監聽
//使用閉包實作監聽綁
return function() {
//通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象
var xhr = $.ajaxSettings.xhr();
//判斷監聽函數是否為函數
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有監聽函數并且xhr對象支援綁定時就把監聽函數綁定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var data = new FormData($('#mainForm')[0]); //要加【0】
console.log(data);
if(uploading){
layer.alert("檔案正在上傳中，請稍候");
return false;
}
$.ajax({
type: 'POST',
url: 'upload_file.php', //目前路徑
data: data,
dataType: 'json',
processData: false, //序列化，no
contentType: false, //不設定内容類型
beforeSend: function(){
uploading = true;
},
//進度條要調用原生xhr
xhr:xhrOnProgress(function(evt){
var percent = Math.floor(evt.loaded / evt.total*100);//計算百分比
console.log(percent);
// 設定進度條樣式
$('#jdt').css('width',percent * 3 + 'px');
$('#jdt').css('background','skyblue');
//顯示進度百分比
$('#jdt').text(percent+'%');
$('#loaded').text(evt.loaded/1024 + 'K');
$('#total').text(evt.total/1024 + 'K');
}),
success: function (data) {
if (data.code == 200) {
layer.msg(data.message, {icon: 1, time: 1000});
//成功後關閉修改頁
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //先得到目前iframe的索引
parent.layer.close(index); //在執行關閉
} ,2000);
//還有重新整理下iframe的界面
parent.location.reload();
} else {
layer.msg(data.message, {icon: 2, time: 3000});
}
uploading = false;
},
error: function (data) {
alert('服務異常，請稍後重試');
console.log(data);
}
});
}
php代碼如下：
header('content-type:text/html;charset=utf-8');
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "
";
}
else
{
// 檔案中文轉碼
//iconv('utf-8', 'gbk', $_FILES["file"]["name"]);
//取出字尾名
$ext = strrchr($_FILES["file"]["name"],'.');
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . uniqid() . $ext);
$arr['code'] = 666;
$arr['message'] = "已經儲存到: " . "upload/" . uniqid() . $ext;
echo json_encode($arr);die;
}
參考資料: https://www.ddpool.cn/article/94853.htm
希望本文所述對大家jQuery程式設計有所幫助。
