Blob对象实现文件下载和图片预览 FileReader

1、通过url地址来下载文件

优点：使用简单，其余的不知道了

<a href='xxxxxx' dowmload>a>



1
2
3
4

2.自己写模板下载

好处：可以灵活控制模板的变量，便于自定义

var name = '小明'
var age = 22
var str1 = `
			我的名字是：${name}
			我的年龄是：${age}
		`
var hoppy = '打篮球'
var str2 = `
			我的爱好是：${hoppy}
		`
// 第一个参数的所有项目会拼接在一块
var blob = new Blob([str1,str2],{
	type:'text/html'
})

var a = document.getElementById('a')
a.onclick = function () {
    // 同步下载
    this.setAttribute('download', 'hello.html')
    this.href = URL.createObjectURL(blob)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 图片预览

本质上，图片和文件是没有差别的，这里演示的是图片的

同步的方式

<body>
    <input type="file" value="图片预览" id="pic">
    <script>
        pic.onchange = function (e) {
            // e.target.files[0] 实际上就是继承了Blob的文件对象
            var file = e.target.files[0]
            var img = new Image()
            img.src = URL.createObjectURL(file)
            document.body.appendChild(img)

        }
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

结果：

在这里插入图片描述

同步方式

<body>
    <input type="file" value="图片预览" id="pic">
    <script>
        pic.onchange = function (e) {
            // e.target.files[0] 实际上就是继承了Blob的文件对象
           	var file = e.target.files[0]
            
          	var img = new Image()
          	document.body.appendChild(img)
            
            // FileReader其实也是继承Blob对象的一种
            var fileRead = new FileReader()
            fileRead.readAsDataURL(file)
            fileRead.onload = function(){
				img.src = fileRead.result
	  		}
        }
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

相关阅读:
[附源码]java毕业设计篮球装备商城系统
Linux网络-MAC协议
docker desktop for mac os如何使用本地代理
Causal Inference理论学习篇-Tree Based-Causal Tree
Java.lang.Class类 getEnumConstants()方法有什么功能呢？
低延时实时音视频在5G远程操控场景的应用实践
从局部变量说起，关于一个莫得名堂的引用和一个坑！
Rust 从入门到精通04-变量
win7系统的两种硬盘格式mbr和gpt怎么选择？
【C++】模板初阶

原文地址：https://blog.csdn.net/qq_38053677/article/details/126900358