核心代码:
html:
<a onclick="Download()">多文件下载</a>
<ul class="file-list">
<li class="file-item">
<a onclick="ImageDown(this)" url="/Resource/AssetTaskFile/20190319/ace55683-7623-4fca-87e1-1f9dbed25533.jpg">
<span class="title">get_img.jpg</span>
<time>2019-03-19 20:25</time>
</a>
</li>
<li class="file-item active">
<a onclick="ImageDown(this)" url="/Resource/AssetTaskFile/20190319/32c8f8fe-3bf5-45e3-a1d6-41f4b66d9e08.jpg">
<span class="title">get_img.jpg</span>
<time>2019-03-19 20:28</time>
</a>
</li>
</ul>
js
//图片下载 (单个文件,只是图片,不需要后端操作)
function ImageDown(obj) {
var url = $(obj).attr('url');
var name = $(obj).attr('name');
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
a.download = name // '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
image.src = url
}
//多文件下载(任意类型文件,需要后端返回)
function Download () {
$("li").each(function (i, v) {
setTimeout(function () {
var url = $(v).find("a").attr("url")
var name = $(v).find("span").text()
location.href = "/Utility/FileDown?url=" + url + "&filename=" + name
},1000*i)
})
}
c#控制器处理:
/// <summary>
/// 文件下载
/// </summary>
/// <param name="url"></param>
/// <param name="filename"></param>
/// <returns></returns>
[HttpGet]
public EmptyResult FileDown(string url, string filename)
{
url = Server.MapPath(HttpUtility.UrlDecode(url));//路径
FileStream fs = new FileStream(url, FileMode.Open);
byte[] bytes = new byte[(int)fs.Length];
fs.Read(bytes, 0, bytes.Length);
fs.Close();
Response.ContentType = "application/octet-stream";
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(filename, System.Text.Encoding.UTF8));
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
//注释掉的那种方法也可以!!
//url = Server.MapPath(HttpUtility.UrlDecode(url));//路径
//FileInfo fileinfo = new FileInfo(url);
//Response.Clear(); //清除缓冲区流中的所有内容输出
//Response.ClearContent(); //清除缓冲区流中的所有内容输出
//Response.ClearHeaders(); //清除缓冲区流中的所有头
//Response.Buffer = true; //该值指示是否缓冲输出,并在完成处理整个响应之后将其发送
//Response.AddHeader("Content-Disposition", "attachment;filename=" + filename);
//Response.AddHeader("Content-Length", fileinfo.Length.ToString());
//Response.AddHeader("Content-Transfer-Encoding", "binary");
//Response.ContentType = "application/octet-stream"; //获取或设置输出流的 HTTP MIME 类型
//Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312"); //获取或设置输出流的 HTTP 字符集
//Response.TransmitFile(url);
//Response.End();
return new EmptyResult();
}