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中JVM虚拟机详解
ViewBinding——Android之视图绑定
map和set的使用
51单片机项目（10）——基于51单片机的电压计
过滤器监听器
fastadmin 后台列表数据多表查询筛选
redis6.0.6安装（window版）
linux网络服务学习（1）：nfs
app测试和web测试有什么区别
GStreamer appsrc 等插件实现视频音频混流，录制和推流

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