Ajax上传文件进度条功能示例代码
2575
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上传文件进度条功能示例代码
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!