js教程

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

我的站长站 2022-12-16 人阅读

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>";
?>


相关推荐
  • AJAX
  • 上传文件
  • 进度条
  • 帝国CMS表单如何使用ajax提交?

    自己做了个表单提交,但是form的转跳页面提示,想做成ajax根据返回信息提示。ajax提交思路代码var data = $(&#39;#form&#39;).serialize(), url = $(&#39;#form&#39;).attr(&#39;action&#39;); $.ajax({ method:"POST...

    帝国cms教程 241 3年前
  • wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]
    wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]

    Quick Ajax插件说明使用此插件,你可以在你的主题里实现无限加载文章来代替传统的分页模式。提供多种列表模式:瀑布流、传统文章模式、时间轴等。wordpress加载主要功能外观设置选择布局:经典(列表)或...

    wordpress插件 463 3年前
  • wordpress实现文章的ajax无限加载

    刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script(&#39;jquery&#...

    wordpress教程 199 3年前
  • nginx宝塔面板上传文件环境配置方法

    在使用nginx系统的宝塔面板开发上传或下载文件功能时,需要首先要配置下载nginx或PHP的参数。否则上传下载大文件时,总是报错,上传小一点的文件,就不报错。修改nginx配置打开nginx管理界面,看到“性能调整”,主要修改连接超时、最大上传文件大小,其他的也可...

    服务器配置 24 6个月前
  • DISCUZ升级后不显示“选择文件上传”按钮

    小编自己的discuz论坛由于不是最新版本,每次登陆论坛都会频繁的有升级提示,这次由于小编手贱了一下下,点击了升级flash player 14。最终导致小编的论坛中就再也看不到:选择文件上传“那个按钮了,图片添加到帖子内容中上方没有:选择文件上传”。这个解决方...

    discuz教程 377 6年前
  • 宝塔面板修改PHP文件上传大小
    宝塔面板修改PHP文件上传大小

    宝塔面板修改PHP文件上传大小很简单,直接打开宝塔面板WEB端进入软件商店选择已经安装且正在使用的PHP版本号点击设置->配置文件搜索post_max_size修改后面的值(自己需要多少就改成多少,切勿过大,防止...

    服务器配置 335 2年前
  • PHP大文件分片上传并带进度条功能示例

    html文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="stylesheet" href...

    php教程 19 5个月前
  • Ajax实现文件上传进度条功能示例代码

    1. HTML代码<div class="form-group required"> <label class="col-sm-3 control-label">文件名:</label> <div class="col-sm-6"> <input id="fileName" name="fileName" class=&quot...

    js教程 14 6个月前
  • 利用flush开发文件下载进度条功能示例

    原理就是分次读写,每次读多少字节,用socket保持与客户端通讯,利用flush()持续更新浏览器UI,返回已下载的数据大小,显示下载速度,以及进度条之类;<html><body><table border="1" width="300"><tr><td width="100">文件大小</td><td width="200"><div...

    php教程 24 6个月前