示例代码：实现Ajax上传文件进度条功能
以下是一个简单的Ajax上传文件进度条功能示例代码： ```html
AJAX上传文件时，有时比较耗时，需要在界面上显示下进度信息，获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
前端代码
<!DOCTYPEhtml><html><head><metacharset="utf8"><title>testupload</title><!--jquery--><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>//页面加载完时加载此函数window.onload=function(){$('#uploadBtnId').click(function(e){$('#resultId').html();//使用FormData对象来提交整个表单，它支持文件的上传varformData=newFormData(document.getElementById("myFormId"));formData.append("ddd",10);//也可使用append追加数据$.ajax({url:'do_upload.php',data:formData,contentType:false,//false:自动加上正确的Content-TypeprocessData: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事件的处理函数varmyXhr=$.ajaxSettings.xhr();if(myXhr.upload){//检查upload属性是否存在//绑定progress事件的回调函数$('#progressId').text();//清空myXhr.upload.addEventListener('progress',function(e){if(e.lengthComputable){varpercent="上传进度："+e.loaded/e.total*100+"%";$('#progressId').text(percent);}},false);}returnmyXhr;//xhr对象返回给jQuery使用},});});}</script></head><body><formid="myFormId"onsubmit="returnfalse"><!--onsubmit阻止点击按钮后浏览器自动提交表单-->文件1：<inputtype="file"name="file1"><br>文本：<inputtype="text"name="text1"><br><buttonid="uploadBtnId">点击上传</button></form><pid="progressId"></p><pid="resultId"></p></body></html>后端代码
<?php//演示用，仅显示下上传上来的数据echo"_FILES<br>";echovar_dump($_FILES);echo"<br><br>_POST<br>";echovar_dump($_POST);echo"<br>";?>
评论
