概述：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. shell脚本编程之“最简单的死循环”【转】

    转自:http://blog.chinaunix.net/uid-23046336-id-3475462.html 在linux下编程的程序猿都知道shell脚本,就算你不怎么熟悉,也应该听过的吧!那 ...

  2. aarch64_l3

    librdmacm-utils-1.1.0-4.fc26.aarch64.rpm 2017-02-12 07:12 87K fedora Mirroring Project libreadline-j ...

  3. Python 常用的内建函数

    内建函数 ​ Build-in Function,启动python解释器,输入dir(__builtins__), 可以看到很多python解释器启动后默认加载的属性和函数,这些函数称之为内建函数, ...

  4. sublime Text快捷键(超级全）

    sublime Text快捷键(超级全) Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W: ...

  5. ZOJ 3781 Paint the Grid Reloaded（DFS连通块缩点+BFS求最短路）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5268 题目大意:字符一样并且相邻的即为连通.每次可翻转一个连通块X( ...

  6. （五）HttpClient 连接超时及读取超时

    第一节: HttpClient 连接超时及读取超时 HttpClient连接超时及读取超时 httpClient在执行具体http请求时候 有一个连接的时间和读取内容的时间: HttpClient连接 ...

  7. 为通过 ATS 检测 Tomcat 完全 TLS v1.2、完全正向加密及其结果检验

    2017 年起 app store 要求 app 对接的服务器支持 TLS v1.2,否则 ats 检测不予通过.有点强制推 TLS v1.2 的意味.本文介绍如何使 tomcat 强制执行 TLS ...

  8. Linux 命令find、grep

    本文就向大家介绍find.grep命令,他哥俩可以算是必会的linux命令,我几乎每天都要用到他们.本文结构如下: find命令 find命令的一般形式 find命令的常用选项及实例 find与xar ...

  9. CVE-2013-3346Adobe Reader和Acrobat 内存损坏漏洞分析

    [CNNVD]Adobe Reader和Acrobat 内存损坏漏洞(CNNVD-201308-479) Adobe Reader和Acrobat都是美国奥多比(Adobe)公司的产品.Adobe R ...

  10. php安装amqp扩展

    1.要安装AMQP PHP扩展,必须先安装librabbitmq库 1.1使用以下步骤下载并安装库: # 下载 git clone git://github.com/alanxz/rabbitmq-c ...