首页-教程-Web前端

Ajax上传文件进度条功能示例代码

 2991

AJAX上传文件时，有时比较耗时，需要在界面上显示下进度信息，获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数


Ajax上传文件进度条功能示例代码


前端代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf8">
  5. <title>test upload</title>
  6. <!--jquery-->
  7. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8. <script>
  9. //页面加载完时加载此函数
  10.         window.onload = function() 
  11.         {
  12.         $('#uploadBtnId').click(function(e)
  13.         {
  14.         $('#resultId').html();
  15.         //使用FormData对象来提交整个表单，它支持文件的上传
  16.    var formData=new FormData(document.getElementById("myFormId"));
  17.    formData.append("ddd", 10); //也可使用append追加数据
  18. $.ajax(
  19. {
  20.       url: 'do_upload.php',
  21.       data: formData,
  22.       contentType: false, //false: 自动加上正确的Content-Type
  23.       processData: false,  //false： 避开jQuery对 formdata 的默认处理
  24.       enctype: 'multipart/form-data',
  25.       type: "POST",
  26.       complete:function(res)
  27.       {
  28.       },
  29.       success: function (res, status)
  30.       {
  31. $('#resultId').html(res);
  32.       },
  33.       error: function(res){
  34.       //错误处理
  35.       },
  36.       xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
  37.            var myXhr = $.ajaxSettings.xhr();
  38.            if(myXhr.upload){ //检查upload属性是否存在
  39.                //绑定progress事件的回调函数
  40.                $('#progressId').text(); //清空
  41.                myXhr.upload.addEventListener('progress', function(e) 
  42.                {
  43.                if (e.lengthComputable)
  44.                {
  45.                var percent = "上传进度：" + e.loaded/e.total*100 + "%";
  46.                $('#progressId').text(percent);
  47.                }
  48.                }, 
  49.                false);
  50.             }
  51.             return myXhr; //xhr对象返回给jQuery使用
  52.         },
  53. });
  54.         });
  55.         }
  56. </script>
  57. </head>
  58. <body>
  59. <form id="myFormId" onsubmit="return false"> <!--onsubmit阻止点击按钮后浏览器自动提交表单-->
  60. 文件1：<input type="file" name="file1"><br>
  61. 文本：<input type="text" name="text1"><br>
  62. <button id="uploadBtnId">点击上传</button>
  63. </form>
  64. <p id="progressId"></p>
  65. <p id="resultId"></p>
  66. </body>
  67. </html>

后端代码

  1. <?php
  2. //演示用，仅显示下上传上来的数据
  3. echo "_FILES<br>";
  4. echo var_dump($_FILES);
  5. echo "<br><br>_POST<br>";
  6. echo var_dump($_POST);
  7. echo "<br>";
  8. ?>


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-13603.html
站长图库 - Ajax上传文件进度条功能示例代码
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐

    Node.js excel转json

    Node.js excel转json

    教程 Web前端
    其实使用Node.js 把excel转成json很简单，就是使用node-xlsx这个npm包就可以了。大致流程：1、读取本地excel文件...