摘要

可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text". response属性的值会根据responseType属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)。

新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

一个例子

服务端以一个一般处理程序来处理下载的请求。

    /// <summary>

    /// download 的摘要说明

    /// </summary>

    public class download : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            string fileName = "1.docx";//客户端保存的文件名

            string filePath = context.Server.MapPath("~/file/" + fileName);//路径

            //以字符流的形式下载文件

            FileStream fs = new FileStream(filePath, FileMode.Open);

            byte[] bytes = new byte[(int)fs.Length];

            fs.Read(bytes, , bytes.Length);

            fs.Close();

            context.Response.ContentType = "application/octet-stream";

            //通知浏览器下载文件而不是打开

            context.Response.AddHeader("Content-Length", bytes.Length.ToString());

            context.Response.AddHeader("Content-Transfer-Encoding", "Binary");

            context.Response.AddHeader("Content-Disposition", "attachment; filename=" +

                HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));

            context.Response.BinaryWrite(bytes);

            context.Response.Flush();

            context.Response.End();

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

js

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jquery-2.1.1.min.js"></script>

    <title></title>

</head>

<body>

    <div id="a1" data-filename="1.docx">下载</div>

    <div id="progressing"></div>

    <script>

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

            var that = this;

            var page_url = 'download.ashx';

            var req = new XMLHttpRequest();

            req.open("POST", page_url, true);

            //监听进度事件

            req.addEventListener("progress", function (evt) {

                if (evt.lengthComputable) {

                    var percentComplete = evt.loaded / evt.total;

                    console.log(percentComplete);

                    $("#progressing").html((percentComplete * 100) + "%");

                }

            }, false);

            req.responseType = "blob";

            req.onreadystatechange = function () {

                if (req.readyState === 4 && req.status === 200) {

                    var filename = $(that).data('filename');

                    if (typeof window.chrome !== 'undefined') {

                        // Chrome version

                        var link = document.createElement('a');

                        link.href = window.URL.createObjectURL(req.response);

                        link.download = filename;

                        link.click();

                    } else if (typeof window.navigator.msSaveBlob !== 'undefined') {

                        // IE version

                        var blob = new Blob([req.response], { type: 'application/force-download' });

                        window.navigator.msSaveBlob(blob, filename);

                    } else {

                        // Firefox version

                        var file = new File([req.response], filename, { type: 'application/force-download' });

                        window.open(URL.createObjectURL(file));

                    }

                }

            };

            req.send();

        });

    </script>

</body>

</html>

测试

XMLHttpRequest Level 2 使用指南

关于XMLHttpRequest新规范可以查看这篇文章的介绍

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

[Javascript]XMLHttpRequest对象实现下载进度条的更多相关文章

  1. xmlHttpRequest 跨域和上传或下载进度条

    跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...

  2. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  3. PHP持续保有长连接，利用flush持续更新浏览器UI，下载进度条实现

    如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...

  4. 用 CALayer 定制下载进度条控件

    // // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...

  5. 用CALayer实现下载进度条控件

    用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11 ...

  6. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  7. python 之实现断点下载与下载进度条

    一.效果图 二.进度条代码 __author__ = 'Yang' import os import time from threading import Thread '''下载进度条''' cla ...

  8. Ajax实现下载进度条

    可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&qu ...

  9. HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

随机推荐

  1. 通过field:global给子元素添加css样式

    {dede:arclist row=5 typeid=200} <li [field:global runphp=’yes’ name=autoindex](@me==1)?@me=”class ...

  2. NOIP2002普及T3【产生数】

    做完发现居然没人用map搞映射特意来补充一发 很容易看出这是一道搜索题考虑搜索方案,如果按字符串转移,必须存储每种状态,空间复杂度明显会爆炸观察到每一位之间是互不影响的 考虑使用乘法原理搜索出每一位的 ...

  3. [新手]在macOS环境下安装xdebug

    使用环境 masOS 10.12 使用MAMP安装的PHP环境   在新安装的系统中,安装xdebug,遇到了一些小问题;   P.S. 重新按照xdebug官网的指南安装了一次,把上次安装失败的xd ...

  4. Linux基础入门学习笔记之三

    第四节 Linux目录结构及文件基本操作 Linux目录结构 Linux 的目录与 Windows 的目录的区别 目录与存储介质(磁盘,内存,DVD 等)的关系 Windows 一直是==以存储介质为 ...

  5. 宝塔Linux常用命令

    https://www.bt.cn/bbs/thread-1186-1-1.html 2017年3月8日发布全新架构的宝塔Linux 面板3.1Beta版,到现在的5.2.0正式版,历经100多天打磨 ...

  6. Hive（五）数据类型与库表操作以及中文乱码

    一.数据类型 1.基本数据类型 Hive 支持关系型数据中大多数基本数据类型 类型 描述 示例 boolean true/false TRUE tinyint 1字节的有符号整数 -128~127 1 ...

  7. day1作业登录接口总结

    作业一:编写登陆接口 1.输入用户名和密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 上面作业,用了几种思路来解决问题:但是本质上其实都是一样的:核心都是对文件的操作,文件的增删改查:并且这些操 ...

  8. bash101总结

    看了 bash101 ,做的一些总结吧,都是些常见用法,易错 1. 有空格会显示多行 2.contine 书里太细了,有空补起来

  9. php匹配邮箱正则

    php匹配邮箱正则 '/[a-z0-9&\-_.]+@[\w\-_]+([\w\-.]+)?\.[\w\-]+/is'

  10. eclipse 背景颜色

    步骤阅读 3 本例使用的背景色是喜大普奔的豆沙绿,比较柔和 设置为:色调:85.饱和度:120.亮度:208 即可,据说长时间使用可以缓解眼疲劳哦. (吐槽:开什么玩笑,远离编程才能缓解眼疲劳好吗)