概述：ajax提交比较大的文件的时候，我们希望能够看到它上传的进度，代码放下面了。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>XMLHttpRequest 上传文件进度条示例</title>

</head>

<body>

<progress id="upload_progress" value="0" max="100"></progress>

<input id="upload_file" type="file" name="upload_file" />

<button id="btn_start">Start</button>

<button id="btn_cancel">Cancel</button>

<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>

<script type="text/javascript">

var xhr = new XMLHttpRequest();

var progressBar = document.getElementById('upload_progress');

$('#btn_start').click(function() {

    var uploadFile = document.getElementById('upload_file').files[0];

    var formData = new FormData();

    formData.append('upload_file', uploadFile);

    // ---------------------------------------

    // 原生xmlHttpRequest发送

    xhr.open('post', '/server_url.php');

    xhr.onload = function() {

        alert('完成！');

    };

    xhr.onerror = function() {

        alert('无法连接服务器！');

    };

    xhr.upload.onprogress = function(progress) {

        if (progress.lengthComputable) {

            console.log(progress.loaded / progress.total * 100);

            progressBar.max = progress.total;

            progressBar.value = progress.loaded;

        }

    };

    xhr.upload.onloadstart = function() {

        console.log('started...');

    };

    xhr.send(formData);

    // ---------------------------------------

    // 使用jQuery发送

    /**

    $.ajax({

       type: "POST",

    　　url: "/server_url.php",

    　　data: formData , //这里上传的数据使用了formData 对象

    　　processData: false,

    　　contentType: false, //必须false才会自动加上正确的Content-Type

    　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用

    　　xhr: function() {

    　　　　var xhr = $.ajaxSettings.xhr();

    　　　　if (xhr.upload) {

    　　　　　　xhr.upload.onprogress = function(progress) {

                    if (progress.lengthComputable) {

                        console.log(progress.loaded / progress.total * 100);

                        progressBar.max = progress.total;

                        progressBar.value = progress.loaded;

                    }

                };

                xhr.upload.onloadstart = function() {

                    console.log('started...');

                };

     　　　 }

              return xhr;

     　 }

    }).done(function(resp) {

        alert('完成！');

    }).fail(function(err) {

        alert('无法连接服务器！')

    });*/

});

$('#btn_cancel').click(function() {

    xhr.abort();

});

</script>

</body>

</html>

原理就是这样，需要在此基础上做扩展的可以随意添加自己想要的功能。

Ajax提交进度显示实例的更多相关文章

  1. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  2. jquery验证后ajax提交，返回消息怎样统一显示的问题

    /* jquery验证后ajax提交.返回消息怎样跟jquery验证体系统一显示的问题,网上查了非常多资料.都没有找到明白的答案,通过数小时的尝试,最终攻克了,现举一个简单的样例,给须要的人參考參考吧 ...

  3. Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

    加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...

  4. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  5. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  6. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  7. nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示，如何传递GET参数等。

    ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...

  8. Django之Ajax提交

    Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...

  9. 【ajax 提交表单】多种方式的注意事项

    在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...

随机推荐

  1. python（13）多线程：线程池，threading

    python 多进程:多进程 先上代码: pool = threadpool.ThreadPool(10) #建立线程池,控制线程数量为10 reqs = threadpool.makeRequest ...

  2. Linux内存初始化【转】

    转自:http://www.cnblogs.com/super-king/p/3291120.html start_kernel -> setup_arch 在这个函数中我们主要看这几个函数. ...

  3. Java集合之Collection与之子类回顾

    Java学习这么久,打算这几天回顾下java的基本知识点,首先是集合. 一.常用集合类关系图 Collection |___List 有序,可重复 |___ArrayList  底层数据结构是数组,增 ...

  4. sql的主键，int类型，自增，自动编号到了规定最大数，接下来数据库会怎么做

    答案:它会从1开始重新编号,但是避开已经重复的值.

  5. 十三、springboot集成定时任务(Scheduling Tasks)

    定时任务(Scheduling Tasks) 在springboot创建定时任务比较简单,只需2步: 1.在程序的入口加上@EnableScheduling注解. 2.在定时方法上加@Schedule ...

  6. maven学习--生命周期

    clean --清理项目 default --构建项目(最核心)  ===========compile , test , package , install site --生成项目站点

  7. 洛谷P2279消防局的设立

    传送门啦 一个很摸不清头脑的树形dp 状态: $ dp[i][0] $ :选自己 $ dp[i][1] $ :选了至少一个儿子 $ dp[i][2] $ :选了至少一个孙子 ------------- ...

  8. Git push将本地版本库的分支推送到远程服务器上对应的分支

    在使用git commit命令将修改从暂存区提交到本地版本库后,只剩下最后一步将本地版本库的分支推送到远程服务器上对应的分支了,如果不清楚版本库的构成,可以查看我的另一篇,git 仓库的基本结构. g ...

  9. [android]解析XML文件的方法有三种：PULL,DOM,SAM

    PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser．nextText从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDocu ...

  10. 关于UrlEncode 一团乱麻的问题，后续彻底理解。Java中的 URLEncoder 与 URLDecoder无bug

    很多开放平台都是小白开发的,对这个urlencode理解的不到位,他们总是认为java官方的urlencode有bug,需要 URLEncoder.encode("Hello World&q ...