使用blob实现文件下载和图片预览
学习blob对象的笔记
blob叫做二进制大对象(binary large object)主要是存放二进制的容器。
1 存取文本
存放二进制数据,类似数组size为数据长度,type指定类型
example:
var str = 'hello world'var blob = new Blob([str], {type: 'text/plain'})console.log('blob:', blob)
打印结果:
调用text方法读取文本,结果为异步的
blob.text().then(res => console.log(res))
2 存取html
指定存取类型为html
var html = `<div><p>123</p></div>`var blob = new Blob([html], {type: 'text/html'})
读取html并渲染到页面,需要借助a标签的download属性。注意跳转地址需要是同源的
// <a id="btn">下载文件</a>btn.onclick = function(e) {this.setAttribute('download', '下载的文件名.html')// H5新增方法,把blob文件变成URL地址this.href = URL.createObjectURL(blob)}
点击下载,可以看到地址是同源的
打开下载的文件
可以看到对应的html内容
example2:下载百度的html内容,先就百度的页面保存下来
input标签type属性设置为file获取百度html文件
<input type="file" id="input">
当文件被选中时读取文件
input.onchange = function(e) {var file = e.target.files[0]console.log('file: ', file)
}
可以看到该文件是File的实例,而文件对象File是继承自blob的二进制对象Blob
接着动态创建a标签,添加文件到URL,点击执行
var a = document.createElement('a')
a.setAttribute('download', 'baidu.html')
a.href = URL.createObjectURL(file)
a.click()
选中百度html文件,会自动执行下载
打开下载的文件,就是百度页面html内容
3 图片预览
类似地,利用input标签选取文件,监听change事件,创建一个Image对象,动态地添加src属性,最后把元素添加到页面即可
var img = new Image()
img.src = URL.createObjectURL(file)
document.body.appendChild(img)
选取图片后在页面显示
上面的是同步方式,创建URL添加元素,下面为异步方式
利用FileReader对象异步读取计算机文件,使用readAsDataURL方法读取Blob对象,读取完成后结果保存在result中,接着类似地赋值给img的src属性,最后添加dom元素即可。
var img = new Image()
var Reader = new FileReader()
Reader.readAsDataURL(file)
Reader.onload = function() {img.src = Reader.result
}
document.body.appendChild(img)
选取文件后显示图片到页面
使用blob实现文件下载和图片预览相关推荐
- Java实现Ftp文件下载及图片预览
* 功能描述: 通过浏览器的方式下载ftp文件 * @Param: [url, port, username, password, ftpFilePath, fileName, response] * ...
- vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览 上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法 图片预览其实 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目 基于Vue.js+axios ...
- HTML5 实现图片预览和查看原图
html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...
- html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
- js小学生图区_多种方式实现js图片预览
js多种方式图片预览-持续更新 //设置自己的变量存储区 var Util = { file : $("#file"), image_show:$("#img_show& ...
最新文章
- Git_学习_06_ 放弃本地修改
- 【安全漏洞】深入剖析CVE-2021-40444-Cabless利用链
- Scalaz(44)- concurrency :scalaz Future,尚不完整的多线程类型
- 判断一颗二叉树是否为二叉搜索树(Validate Binary Search Tree)
- 【QuotationTool】主要数据结构
- 网易2016年研发project师编程题(2)
- RHEL 6.0安装Qt
- 关于经纬度的两个计算[Teaksxgluxv]
- 你为什么不爱发朋友圈了?
- P3160:局部极小值(容斥、状压)
- 二叉树 的建立及遍历 过程
- 微信小程序-template使用:实现购物车商品数量加减功能
- Struts2之命名空间与Action的三种创建方式
- Mac右键使用VS Code打开项目
- java基础 Day05 内部类、Object类、匿名内部类;方法的覆写;抽象类和接口
- 微信小程序实现城市索引选择+搜索
- 8.5 专业的“对口” ——《逆袭大学》连载
- Graph Representation Learning via Graphical Mutual Information Maximization
- 大屏监控系统实战(1)-项目介绍
- 工具---AI绘图:将文本文字描述转换成图片