Ajax实现下载进度条
可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text".
response 属性的值会根据 responseType 属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)。
新版本的 XMLHttpRequest 对象,传送数据的时候,有一个 progress 事件,用来返回进度信息。
它分成 上传 和 下载 两种情况。下载的 progress 事件属于 XMLHttpRequest 对象,上传的 progres s事件属于 XMLHttpRequest.upload 对象。
- 1、前端代码:
- downLoadProcess(url,filename){
- filename = filename || 'xxx.csv';
- // 创建xhr对象
- var req = new XMLHttpRequest();
- //向服务器发送请求 open() send()
- req.open("POST", url, true); //(method-GET/POST ,url, async)
- req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST时需要传递
- //监听进度事件
- xhr.addEventListener("progress", uploadProgress, false);
- xhr.addEventListener("load", uploadComplete, false);
- xhr.addEventListener("error", uploadFailed, false);
- xhr.addEventListener("abort", uploadCanceled, false);
- /*
- XMLHttpRequest 的 responseType 属性
- 一个枚举类型的属性,返回响应数据的类型,只能设置异步的请求
- 1、'' -- DOMString (默认); UTF-16
- 2、arraybuffer -- arraybuffer对象,即类型化数组
- 3、blob -- Blob对象, 二进制大数据对象
- 4、document -- Document对象
- 5、json
- 6、text
- */
- //设置返回数据的类型
- req.responseType = "blob";
- req.onreadystatechange = function () { //同步的请求无需onreadystatechange
- 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("fname=Henry&lname=Ford");
- }
- function uploadProgress(evt) {
- if (evt.lengthComputable) {
/*后端的主要时间消耗都在查询数据和生成文件,所以可以设置默认值,直到真正到达下载的进度,再开始走进度条*/- var percent = Math.round(evt.loaded * 100 / evt.total);
- document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
- document.getElementById('progress').style.width = percent.toFixed(2) + '%';
- }else {
- document.getElementById('progress').innerHTML = 'unable to compute';
- }
- }
- function uploadComplete(evt) {
- /* 服务器端返回响应时候触发event事件*/
- document.getElementById('result').innerHTML = evt.target.responseText;
- }
- function uploadFailed(evt) {
- alert("There was an error attempting to upload the file.");
- }
- function uploadCanceled(evt) {
- alert("The upload has been canceled by the user or the browser dropped the connection.");
- }
2、后台处理接口
- public void aaa()
- {
- string result = string.Empty;
- for (int i = 1; i <= 6000; i++)
- {
- result += i.ToString();
- int len = result.Length;
- Response.Headers.Add("Content-Length", len.ToString());
- Response.Headers.Add("Content-Encoding", "UTF-8");
- Response.Write(result);
- }
- }
注意到 ::
Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");
写出 http 头时候,附加 “Content-Length”和Content-Encoding,
这样 JS 端的 progress 事件的 event.lengthComputable 值才会为 true
, event.total 才会在数据传输完毕之前取得值,
否则 event.lengthComputable 值会返回 false
, event.total 在数据完成之前值都是0
。
Ajax实现下载进度条的更多相关文章
- PHP持续保有长连接,利用flush持续更新浏览器UI,下载进度条实现
如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...
- 用 CALayer 定制下载进度条控件
// // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...
- Ajax实现带进度条的文件上传
Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...
- 用CALayer实现下载进度条控件
用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11 ...
- CodePush自定义更新弹框及下载进度条
CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...
- python 之实现断点下载与下载进度条
一.效果图 二.进度条代码 __author__ = 'Yang' import os import time from threading import Thread '''下载进度条''' cla ...
- Ajax技术——带进度条的文件上传
1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
- HTML5 CSS3 诱人的实例 : 网页载入进度条的实现,下载进度条等
今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- layer.msg 添加在Ajax之前 显示进度条。
一.使用方法:1)必须先引入jQuery1.8或以上版本 <script src="jQuery的路径"></script> <script src= ...
随机推荐
- Javascript之全局变量和局部变量部分讲解
以此文作为自己学习的一个总结. 关于全局变量和局部变量的一句简单的定义:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; fu ...
- Netty相关面试题
1.BIO.NIO和AIO的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大. 伪异步IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源. N ...
- c# 命名空间之System.IO(继承关系)
System.IO 命名空间包含允许:读写文件.数据流的类型以及提供基本文件和目录支持的类型. 在这个命名空间中主要的类有: 字节流:Stream.BufferedStream.MemoryStrea ...
- hashcode方法 简析
package com.ycgwl; import java.util.HashMap; class People{ private String name; private int age; pub ...
- sql执行计划变更和删除缓存中执行计划的方法
将指定SQL的执行计划从共享池删除的方法 http://www.2cto.com/database/201204/126388.html Oracle SQL执行计划变更的问题 http://www. ...
- Ubuntu查看版本信息
关于查看Ubuntu的版本信息,我们会用到两个命令uname和cat. uname命令 这个命令用于显示系统信息.其参数为: -a 显示所有系统信息.其中包括机器名.操作系统名.内核名称等. 以下为执 ...
- ZT 创建类模式总结篇
创建类模式总结篇 分类: 设计模式 2012-03-26 09:03 7320人阅读 评论(11) 收藏 举报 编程优化设计模式任务 创建类模式主要关注对象的创建过程,将对象的创建过程进行封装,使客户 ...
- 经典优秀屏幕截图录像工具FastStone Capture推荐
FastStone Capture (FSCapture) 是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能. FastStone Capture 主要功能 包括:1.截图功能(可以捕捉:活 ...
- 使用combineReducers注意事项
一.从‘redux’包中引入combineReducers方法: import { combineReducers } from 'redux'; 二.针对state的不同属性写不同的reducer, ...
- 百度地图label样式修正
现象:百度地图 label 宽度为0,文字在标签边框外. 原因:样式冲突,在css中添加下列代码即可: .BMapLabel{ max-width:none; }