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

文件下载和图片预览 Blob FileReader

article 2024/12/26 19:48:01

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>