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 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"> <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> <!-- 内层div 逐渐递增的进度条 --> <div></div> </div> <p>总大小<span></span>；已上传<span></span>；</p><br> <form> 选择文件：<input type="file"> <input type="button" value="上传"> </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; }
参考资料: https://www.jb51.net/article/94853.htm
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》