概述：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. C++ 和 MFC的学习

    1. 在Windows应用程序设计中,既可以使用个C的基本数据类型,也可以使用Windows自定义的数据类型.但要注意,凡是Windows自定义的关键字都要大写. 2. 什么是句柄? 在Windows ...

  2. Laravel 5.5 迁移报错：General error: 1215 Cannot add foreign key constraint

    问题 之前一直用的 Laravel 5.4,数据库也是直接写 sql 的,感觉可定制性更强,顺便锻炼下 sql.这次改用了 Laravel 5.5,索性用迁移建库试试,结果报错如下: SQLSTATE ...

  3. Flask：静态文件&模板（0.1）

    Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2 前面看了Flask的Quickstart文档,可是,一直没有练习里面的内容,这不,刚刚练习完毕,来写篇博文记录一下! ...

  4. 小程序开发总结一：mpvue框架及与小程序原生的混搭开发

    mpvue-native:小程序原生和mpvue代码共存 问题描述 mpvue和wepy等框架是在小程序出来一段时间之后才开始有的,所以会出现的问题有:需要兼容已有的老项目,有些场景对小程序的兼容要求 ...

  5. redis入门——redis常用命令

    http://blog.csdn.net/wclxyn/article/details/8449082 https://jingyan.baidu.com/article/90bc8fc87ce8e2 ...

  6. Oracle 函数 “自动生成订单号”

    create or replace function get_request_code return varchar2 AS --函数的作用:自动生成订单号 v_mca_no mcode_apply_ ...

  7. Centos之文件搜索命令locate

    locate命令 locate 文件名 在后台数据库中按文件名搜索,搜索速度更快 /var/lib/mlocate #locate命令所搜索的后台数据库 updatedb 更新数据库 locate搜索 ...

  8. bash常用快捷键和命令

    在使用Linux的时候,最常见的终端解释器就是bash了.bash下有很多技巧,我知道这么几个: 0.关于按键模式bash默认的按键模式是emacs风格的.你也可以通过set -i vi设定为vi风格 ...

  9. Spring Boot数据库交互

    在上篇文件的基础上进行开发,简单实现一下增.查操作,删除和修改类似,作为一个demo就暂时不做重复工作了,实现原理类似 IDEA创建Spring Boot项目 项目结构 新建MySQL数据库相关信息 ...

  10. Web前端开发最佳实践（10）：JavaScript代码不好读，不好维护？你需要改变写代码的习惯

    前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽 ...