H5+Ajax+WebApi实现文件下载(进度条，多文件)
前言
踩过的坑
1、WebAPI跨域
2、Jquery ajax低版本不支持XHR 2功能
3、Jquery ajax不支持Deferred的process事件
4、IE下文件名乱码问题
功能实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
</head>
<body>
<input type="button" value="全部下载" onclick="doAllDownload()" />
<div>
<ul>
<li>
<span>文件1.txt</span> <span id="progress1"></span>
</li>
<li>
<span>文件2.txt</span> <span id="progress2"></span>
</li>
<li>
<span>文件3.txt</span> <span id="progress3"></span>
</li>
</ul>
</div>
<script>
function doAllDownload() {
/**
测试：
1、文件3数据量大
2、文件2不存在
**/
var files = [];
files.push({ url: 'D:\\Test\\1.txt', id: 'progress1' });
files.push({ url: 'D:\\Test\\2.txt', id: 'progress2' });
files.push({ url: 'D:\\Test\\3.txt', id: 'progress3' });
files.forEach(function (item) {
//多文件下载
DownloadFile(item.url).then(function (result) {
//请求完成
var msg = "文件下载完毕！";
if (result.error) {
msg = result.error.message ? result.error.message : "文件下载错误！";
}
$("#" + item.id).html(msg);
}, function (err) { }, function (evt) {
//根据item处理进度条数据
$("#" + item.id).html("已下载 " + parseInt(100 * evt.loaded / evt.total) + "%");
});
})
}
function DownloadFile(url) {
var filename = url.substr(url.lastIndexOf('\\') + 1);//文件名
var dfd = new $.Deferred();
var promise = $.ajax("http://localhost:2032/api/Test/DownloadFileUrl", {
type: "POST",
contentType: 'application/json',
data: JSON.stringify({ url: url }),
/*JQuery 3.0以下版本不支持*/
xhrFields: {
responseType: 'arraybuffer',
onprogress: dfd.notify//触发dfd.process事件
}
});
promise.then(function (data, status, xhr) {
if (xhr.statusText == "OK") {
var type = xhr.getResponseHeader('Content-Type');
var blob = new Blob([data], { type: type });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
var a = document.createElement("a");
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location = downloadUrl;
} setTimeout(function () {
URL.revokeObjectURL(downloadUrl);
dfd.resolve({});
}, 100);
}
} else {
dfd.resolve({ error: { message: xhr.statusText } });
}
}, function (err) {
//异常处理
}, function (info) {
//不支持Deferred的process事件
});
return dfd;
}
</script>
</body>
</html>
Asp.NET后台代码
1、为了设置进度条 故设置 BUFFER_SIZE 为 5 开发时请注意，跨域设置请自行在Web.config或者WebApiConfig.cs里面设置。就不上代码了，网上很多例子！
2、文件名乱码问题：请参考 https://my.oschina.net/pingpangkuangmo/blog/376332
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Http; namespace WebAPI.Controllers
{
public class TestController:ApiController
{
private const int BUFFER_SIZE = ;
[HttpPost]
public void DownloadFileUrl(dynamic args)
{
string url = args.url;
string filename = url.Substring(url.LastIndexOf('\\') + );
var response = HttpContext.Current.Response;
if (File.Exists(url))
{
byte[] buffer = new byte[BUFFER_SIZE];
response.Clear();
//跨域处理
response.AddHeader("Access-Control-Allow-Origin", "*");//支持所有跨域请求
response.AddHeader("Access-Control-Allow-Headers", "*");//支持所有Access-Control-Request-Headers字段 response.ContentType = "application/octet-stream";//定义stream为下载类型的窗口
response.AddHeader("Content-Disposition", "attachment;filename=" + filename);
using (var stream = File.Open(url, FileMode.Open, FileAccess.Read, FileShare.Read))
{
//CORS请求时可访问 Content-Length
var sHeaders = response.Headers["Access-Control-Expose-Headers"] + ",Content-Length";
response.Headers.Remove("Access-Control-Expose-Headers");
response.AddHeader("Access-Control-Expose-Headers", sHeaders); long total = stream.Length;//文件总大小
response.AddHeader("Content-Length", total.ToString());
response.Charset = "UTF-8";
while (total > && response.IsClientConnected)
{
int read = stream.Read(buffer, , BUFFER_SIZE);//读取的大小
response.OutputStream.Write(buffer, , read);
response.Flush();
total = total - read;
}
response.End();
}
}
else
{
response.Clear();
response.AddHeader("Access-Control-Allow-Origin", "*");//支持所有跨域请求
response.AddHeader("Access-Control-Allow-Headers", "*");//支持所有Access-Control-Request-Headers字段
response.StatusCode = ;
response.Status = "200 File_Not_Found";
response.Write("{\"Message\":\"File Not Found\",\"Status\":\"ERROR\"}");
response.End();
}
} }
}
测试结果：
文件准备 D:\\Test\1.txt（数据过多） D:\\Test\3.txt（数据略少） 两个文件，文件 2.txt 不存在。
H5+Ajax+WebApi实现文件下载(进度条，多文件)的更多相关文章
- Ajax实现带进度条的文件上传
Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- Python展示文件下载进度条
前言 大家在用Python写一些小程序的时候,经常都会用到文件下载,对于一些较小的文件,大家可能不太在乎文件的下载进度,因为一会就下载完毕了. 但是当文件较大,比如下载chromedriver的时候, ...
- cordova加载层、进度条、文件选择插件
在做cordova项目的时候,感觉应用的响应速度跟原生应用比相差甚远,一个主要问题就是如加载层.进度条等弹出对话框的效率不行.毕竟项目中的这些弹框都是用dom拼成的,dom的渲染效率和原生控件比起来慢 ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- 给H5页面添加百分比的进度条，精确度高
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9 原理:由于H ...
- asp.net利用ajax和jquery-ui实现进度条
前台用ajax不停进行查询,直到任务完成.进度条用的是jquery-ui.后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中. 代码作为简单示例,实际应用时应对 ...
- Ajax技术——带进度条的文件上传
1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
- H5 可堆叠的圆环进度条，支持任意数量子进度条
by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...
随机推荐
- Solr4.10与tomcat整合并安装中文分词器
1.solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展,并对索引. ...
- Redis命令与配置
命令 开启服务端 redis-server.exe redis.conf 客户端连接 redis-cli.exe -h 127.0.0.1 -p 6379 1.连接操作相关的命令 quit:关闭连接( ...
- JavaWeb之Java Servlet完全教程（转）
Servlet 是一些遵从Java Servlet API的Java类,这些Java类可以响应请求.尽管Servlet可以响应任意类型的请求,但是它们使用最广泛的是响应web方面的请求. Servle ...
- Python学习日记:day8-------文件操作
文件操作 1,文件路径:d:\xxxx.txt 绝对路径:从根目录到最后 相对路径:当前目录下的文件 2,编码方式:utf-8 3,操作方式:只读,只写,追加,读写,写读...... ...
- 服务器端语言go之开篇分享
由于之前看过其他脚本语言,此时看服务器端语言go语法时也短短用了半天的时间,如图1所示,是个人学习go语法的目录截图,学习网址:菜鸟网站,为了个人方便学习和记忆,因此写下本篇文章,在本篇文章里我主要是 ...
- discuz管理员登录进入后台管理马上跳转到登录界面
昨天尝试了一下这个discuz论坛,感觉还可以.今天刚刚用管理员账户进入后台管理,准备改一改界面熟悉一下,过不了10秒钟.老是马上就退出来了.我想起来了,昨天是在阿里云服务器上面直接登录这个管理员账号 ...
- touchstart和touchend事件
touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需 ...
- 深入学习rollup来进行打包
深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...
- Dubbo（一） 开始认识Dubbo，分布式服务框架
引言: 以前的车马很慢,一生只够爱一个人以前的网站人很少,一个单应用服务着一个人--------------------现在,动不动就谈什么高并发,千万级访问.单应用?BOOM!分分钟爆炸.于是,技术 ...
- 响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助. 对手机分辨率和网页像素的初步认识是,是2倍的差别. 但 ...