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


相关推荐
  • js代码
  • AJAX
  • 上传文件
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 40 5个月前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 165 3年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 701 3年前
  • 帝国CMS表单如何使用ajax提交?

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

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

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

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

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

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

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

    宝塔面板 49 1年前
  • DISCUZ升级后不显示“选择文件上传”按钮

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

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

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

    宝塔面板 370 3年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 1个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 2个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 2个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 2个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 3个月前