概述：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. go 函数的作用域及可见性

    1.全局变量,在程序整个生命周期有效 比如: test.go 中 我们定义 了 a 作为全局变量,那么在这个程序中任何地方都可以调用a, 这个 2. 局部变量,分为两种:1)函数内定义,2)语句块内定 ...

  2. Linux MySQl 5.7.17 MySQL ERROR 1366(HY000):Incorrect string value 解决方法

    MySQL ERROR 1366(HY000):Incorrect string value,在往数据库中插入中文的时候会出现. 这也就是编码问题,网上大部分都是说设置下配置文件中的设置,而可悲的是在 ...

  3. swagger学习

    https://segmentfault.com/a/1190000010144742 https://segmentfault.com/a/1190000014775124 https://blog ...

  4. Scrapy的【SitemapSpider】的【官网示例】没有name属性

    Windows 10家庭中文版,Python 3.6.4,Scrapy 1.5.0, 上午看了Scrapy的Spiders官文,并按照其中的SitemapSpider的示例练习,发现官文的示例存在问题 ...

  5. python网络编程-多进程multiprocessing

    一:mutilprocess简介 多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去 ...

  6. java基础40 可变参数、自动装箱和自动拆箱

    一.可变参数 可变参数是jdk1.5新特性 1.1.可变参数的格式 数据类型...变量名 // 数据类型...变量名public static void sum(int...arr){ } 1.2.可 ...

  7. pip3

    pip3 install django #安装rabbitmq连接模块 pip3 install pika pip3 install paramiko pip3 install ipython pip ...

  8. AdvStringGrid 复选框、goRowSelect

    var I: Integer; begin do begin AdvStringGrid1.AddCheckBox(, I, True, True); AdvStringGrid1.Cells[,I] ...

  9. Ubuntu 登陆循环启动 无法进入桌面 libGL error: failed to load driver: swrast

    导致无法进入Ubuntu图形界面的原因很多,关键是要找到问题原因所在. 最佳的方法是查看.xsession-errors这个日志文件,依据问题解决~ 这里先汇总一下问题: 1 环境变量导致的,进入tt ...

  10. （转载）使用SQL-Server创建一个银行数据管理系统Ⅰ

    首先,要创建一个完整的数据管理系统,不是一蹴而就的,一定要要一步一步的来,不断完善,最终方能达到自己想要的结果,所以我在这里也是一点一点分步来做的. 创建数据库,数据库属性在这里用的是默认(不推荐使用 ...