概述：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. Linux硬盘镜像获取与还原（dd、AccessData FTK Imager）

    1.硬盘镜像获取工具:dd dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 1.1 本地取数据 查看磁盘及分区 # fdisk - ...

  2. Ubuntu下安装arm-linux-gnueabi-xxx编译器【转】

    转自:http://blog.csdn.net/real_myth/article/details/51481639 from: http://www.linuxdiyf.com/linux/1948 ...

  3. 事件,继承EventArgs带有参数的委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 「要买车网」免费获取汽车电商要买车网购车优惠券 - 持续更新（2016-03-12）www.fortunelab.cn

    汽车电商要买车网简介 “要买车”(www.yaomaiche.com)网站是上海运图投资有限公司旗下网站,是首家真正打通交易闭环的汽车电商网站,由中国电子商务成功探索者——卜广齐于2014年10月在上 ...

  5. sicily 1231. The Embarrassed Cryptography

    Time Limit: 2sec    Memory Limit:32MB  Description The young and very promising cryptographer Odd Ev ...

  6. TCP/IP详解（整理）

    1.概述 路由器是在网络层进行联通,而网桥是在链路层联通不同的网络. IP层用ICMP来与其他主机或路由器交换错误报文和其他的重要信息.应用程序也可以访问ICMP,两个诊断工具:Ping和Tracer ...

  7. maven package exec 及 maven 配置文件详解

    maven package test包下执行test 的配置文件 生成target目录,编译.测试代码,生成测试报告,生成jar/war文件 maven 配置文件详解 http://blog.csdn ...

  8. centos7的防火墙（firewalld）

    Centos7中默认将原来的防火墙iptables升级为了firewalld,firewalld跟iptables比起来至少有两大好处: 1.firewalld可以动态修改单条规则,而不需要像ipta ...

  9. sizeof求结构体大小

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  10. mvc的cshtml Request取不到值

    如果路径为:http://localhost:2317/food/1,这时用Request["id"]是取不到值的应该用: Request.RequestContext.Route ...