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= ...
随机推荐
- Android Animation 知识点速记备忘思维导图
备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip
- Oracle基础之count(1)和count(*)的区别
在数据库中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 我在网上看到一些所谓的优 ...
- Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)
背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...
- C++数组怎么复制
C++数组怎么复制: #include <string.h>main(){int a[10]={34,56,4,10,77,51,93,30,5,52};int b[10];memcpy( ...
- Python学习---基础函数的学习
1.1. 基础函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 灌输一个概念:Python中函数就是对象,函数和我们之前的[1,2,3],'abc ...
- GO语言(四)线程通信
package main import "fmt" func fibon(c,quit chan int) { x,y := , for { select { case c < ...
- ADB命令详解及大全( 声明:此文是参考大佬博客所做的笔记!)
adb是什么? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.a ...
- Android webview 点击超链接打开新的webview
webview.setWebViewClient(new webViewClient() { HitTestResult hit = view.getHitTestResult(); if (hit ...
- Mutual Training for Wannafly Union #2
codeforces 298A. Snow Footprints 分类讨论三种情况: ①..RRRRRR… ②..LLLLLLL… ③..RRRLLLL.. //AC by lwq: #includ ...
- Oracle中的rownum不能使用大于>的问题
标题:Oracle中的rownum不能使用大于>的问题 一.对rownum的说明 关于Oracle 的 rownum 问题,很多资料都说不支持SQL语句中的“>.>=.=.betwe ...