jqueryのajaxは画像をアップロードし、アップロードの進捗状況を表示します
jqueryアップロードファイル用formdata、アップロード進捗バーxhrのonprogressを追加する必要があります
htmlコードは次のとおりです.
phpコードは次のとおりです.
参考資料:https://www.cnblogs.com/yiyide266/p/6932250.html
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コードは次のとおりです.
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.cnblogs.com/yiyide266/p/6932250.html