当前位置：首页 > news >正文

文件下载和图片预览 Blob FileReader

news 2024/12/14 0:37:11

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

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

<a href='xxxxxx' download></a><!-- xxxxxx如果是同源，则会下载 -->
<!-- xxxxxx如果是本地文件路径，也会下载 -->

2.自己写模板下载

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

var str1 = `<div>我的名字是：小明</div><div>我的年龄是：22</div>`
var str2 = `<div>我的爱好是：打篮球</div>`
// 第一个参数的所有项目会拼接在一块
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)
}

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>

结果：

在这里插入图片描述

异步方式：

<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>