jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
程序员文章站
2022-10-15 19:09:16
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。分享给大家供大家参考，具体如下：
jquery上传文件用的formdata，上传进度条需要添加xhr的...
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。分享给大家供大家参考，具体如下：
jquery上传文件用的formdata，上传进度条需要添加xhr的onprogress
html代码如下：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ding jianlong html</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
</head>
<body>
<!-- 外层div 进度条的整体视觉和位置设置 -->
<div style="width:300px;height: 20px;border: 1px solid #ccc;">
<!-- 内层div 逐渐递增的进度条 -->
<div id="jdt" style="height: 20px;"></div>
</div>
<p>总大小<span id="total"></span>；已上传<span id="loaded"></span>；</p><br>
<form id="mainform">
选择文件：<input type="file" name="file">
<input type="button" value="上传" onclick="upload()">
</form>
<script>
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);
}
});
}
</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;
}
参考资料:
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery中ajax用法总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇： HTML5中判断横屏竖屏的方法(移动端)
下一篇： H5 meta小结(前端必看篇)