file对象，blob对象，filreader对象，fileList和dataTransfer。
生成下载链接，a.download属性进行下载 。
<a>的download属性
一般情况下我们都是将文件上传到后端存储，然后再根据需要通过后端进行文件下载。这种情况需要后端来告知浏览器文件需要下载而不是打开，这样前后端都需要操作是令人不悦的。
终于，H5为<a>提供了一个新属性download，一旦a标签具有down属性，点击该标签后就会自动下载对应href下的资源文件。比如：
<a href="http://www.w3school.com.cn/i/w3school_logo_white.gif" download="logo.gif">点我下载</a>
当然，直接在你的html中使用上面的代码还是无法下载，因为存在跨域资源限制。
上面实例中的a标签的href的链接指向的文件仍然是后端数据，现在我们可以使用js提供的一些方法来创建特别的URL提供文件下载：
目前主要有两种URL,
- BlobURL
- DataURl
Blob对象
Blob全称binary large object（二进制大对象），顾名思义，Blob对象就是用来存储二进制信息的“容器”。
#使用构造函数将非Blob对象转换为Blob对象
Blob(blobParts[, options])
Blob() 构造函数返回一个新的 Blob 对象。 Blob的内容由参数数组中给出的值的串联组成。
很简单，我们把要转化的数据放到数组中作为参数即可：
var str = "This is a userful message!"
var blob = new Blob([str]);//将字符串转化为Blob对象
#将Blob对象转化为BlobURL
我们上面提到的a标签能打开BlobURL中的数据，这样我们就可以下载我们处理过的数据，步骤即：
（即将数据转为Blob，再将Blob生成BlobURL，使用a标签下载。）
var url = URL.createObjectURL(blob);
下面我们写一个方法来根据给定的文件内容和download动态下载文件。
#动态下载文件
function downloadFile(content, filename) {
// 创建a链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成BlobURL
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击(开始下载)
document.body.appendChild(eleLink);
eleLink.click();
// 移除标签
setTimeout(function(e){
document.body.removeChild(eleLink);
},1000);
};
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p onclick="run()">点我下载</p>
<script>
function downloadFile(content, filename) {
// 创建a链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成BlobURL
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击(开始下载)
document.body.appendChild(eleLink);
eleLink.click();
// 移除标签
setTimeout(function(e){
document.body.removeChild(eleLink);
},1000);
};
function run(){
var content = "This is a userful message!";
var filename = "message.txt";
downloadFile(content,filename);
}
</script>
</body>
</html>
理论上可以使用Blob对象下载任意类型的文件，毕竟都能转化为二进制文件，但目前主要用来存储文本文件。况且对于非文本文件或体积很大的文件，参数的传入是个问题。所以我们有必要学习File对象。
File对象
File对象继承了Blob并进行了扩展，使其能够支持使用系统上的文件，如txt等常见文件。
比如我们有一张png，我们如何进行下载呢？当然可以使用Blob对象，但是参数又该如何写呢，这是很麻烦的。
这个时候我们就可以使用File对象获取png，而File继承自Blob，所以也能转换为BlobURL，但是File还有一个好处就是File对象可以从页面中获取文件（input标签），拖放操作生成的 DataTransfer对象。
我们从下面的例子中观察：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File对象和FileList对象</title>
</head>
<body>
<form method="post" type="multipart/form-data" name="fileform">
<label>导入多个文件：
<input type="file" multiple name="myfile">
</label>
<label>导入单个文件：
<input type="file" name="myfile2">
</label>
<input type="submit" value="提交">
</form>
<script>
$(function () {
var myform = document.forms["fileform"];
var inputs = myform.querySelectorAll("input");
var files;//fileList对象
var file2;//file对象
myform.onsubmit = function(e){
files = inputs[0].files;//fileList对象
file2 = inputs[1].files[0];//file对象
console.log(files);
console.log(file2);
e.preventDefault();//阻止默认处理，否则页面可能会被刷新
}
});
</script>
</body>
</html>
总结一下：
input的files属性包含了上传的文件，当input使用multiple属性时可上传多个文件。其中，每个本件就是一个File对象。
现在我们就能使用URL.createObjectURL(file);来创建BlobURL链接了。
DataURL
上面都只说到BlobURL，其实还有一种链接，即DataURL，但这种链接是FileReader对象生成的。
一般情况下BlobURL已经足够，但是经过多次尝试，在手机端貌似无法打开BlobURL，也就无法实现下载，而DataURL却可以打开。（但是DataURL有时候也会失败！且在PC端也容易失败）
FileReader的相关方法可以对Blob对象和File对象进行读取：
其中，
FileReader.readAsDataURL()是我们需要的方法，通过该方法，FileReader将读取Blob或File对象并使得result属性的值包含data:URL格式的链接，即DataURL。
简单的总结
- a标签的
download属性可以告知浏览器直接下载href指定的文件。 - href除了正常正常的URL链接，还支持BlobURL和DataURL。（是具有生命周期的）
- 我们保存文件数据可以使用
Blob对象或File对象。 - 使用
URL.createObjectURL(blob/file);创建BlobURL. - 使用
FIleReader.readAsDataURL(blob/file)创建DataURL.
网友评论