文件下载 图片预览
前提知识：input 当 type 为 file 时可以用来做文件上传的功能，一旦文件上传成功，会触发 onchange 事件，并且在事件对象中可以获取到上传的那个文件。
文件下载
主要用到的 API
URL.createObjectURL(obj) :将对象转成一个url
注意：每次调用 createObjectURL() ，都会创建一个新的 URL 对象。所以，当不再需要这些 URL 对象时，要通过调用 URL.revokeObjectURL()方法来释放。
下载可以通过 a 标签的 download 属性来实现，当 a 标签具有 download 属性时，点击它会下载 href 属性指定的资源。这里通过 click() 来触发点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" id="input" />
<a id="download">下载</a>
</body>
<script>
document.getElementById("input").onchange = (e) => {
const file = e.target.files[0];
let a = document.createElement("a");
// 关键是这一步:将对象转换成一个url
a.href = URL.createObjectURL(file);
a.setAttribute("download", "myTest.html");
a.click();
};
</script>
</html>
图片预览
主要用到的 API
FileReader：FileReader 的实例对象可以读取到文件，当读取操作完成后会触发 load 事件，读取的结果存储于 result 属性当中。后面会详细出一期 FileReader 的文章。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" id="input" />
</body>
<script>
document.getElementById("input").onchange = (e) => {
const file = e.target.files[0];
var fileRead = new FileReader();
fileRead.onload = () => {
var img = new Image();
img.src = fileRead.result;
document.querySelector("body").appendChild(img);
};
fileRead.readAsDataURL(file);
};
</script>
</html>
