Ajax上传文件进度条功能示例代码
2336
AJAX上传文件时，有时比较耗时，需要在界面上显示下进度信息，获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>test upload</title>
<!--jquery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//页面加载完时加载此函数
window.onload = function()
{
$('#uploadBtnId').click(function(e)
{
$('#resultId').html();
//使用FormData对象来提交整个表单，它支持文件的上传
var formData=new FormData(document.getElementById("myFormId"));
formData.append("ddd", 10); //也可使用append追加数据
$.ajax(
{
url: 'do_upload.php',
data: formData,
contentType: false, //false: 自动加上正确的Content-Type
processData: false, //false： 避开jQuery对 formdata 的默认处理
enctype: 'multipart/form-data',
type: "POST",
complete:function(res)
{
},
success: function (res, status)
{
$('#resultId').html(res);
},
error: function(res){
//错误处理
},
xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //检查upload属性是否存在
//绑定progress事件的回调函数
$('#progressId').text(); //清空
myXhr.upload.addEventListener('progress', function(e)
{
if (e.lengthComputable)
{
var percent = "上传进度：" + e.loaded/e.total*100 + "%";
$('#progressId').text(percent);
}
},
false);
}
return myXhr; //xhr对象返回给jQuery使用
},
});
});
}
</script>
</head>
<body>
<form id="myFormId" onsubmit="return false"> <!--onsubmit阻止点击按钮后浏览器自动提交表单-->
文件1：<input type="file" name="file1"><br>
文本：<input type="text" name="text1"><br>
<button id="uploadBtnId">点击上传</button>
</form>
<p id="progressId"></p>
<p id="resultId"></p>
</body>
</html>后端代码
<?php //演示用，仅显示下上传上来的数据 echo "_FILES<br>"; echo var_dump($_FILES); echo "<br><br>_POST<br>"; echo var_dump($_POST); echo "<br>"; ?>
本文网址：https://www.zztuku.com/index.php/detail-13603.html
站长图库 - Ajax上传文件进度条功能示例代码
申明：如有侵犯，请 联系我们 删除。
您还没有登录，请 登录 后发表评论！
提示：请勿发布广告垃圾评论，否则封号处理！！