jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

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);
}
});
}
</script>
</body>
</html>

php代码如下：

<?php
header('content-type:text/html;charset=utf-8');
if ($_FILES["file"]["error"] > 0)
{
 echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
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.jb51.net/article/94853.htm

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。