上传图片,预览并保存成blob类型 和 base64
场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。有两种方法:
方法一:利用URL.createObjectURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
let fileUrl = window.URL.createObjectURL(file)
$img.src = fileUrl
img.onload = function () {
// 手动回收
URL.revokeObjectURL(fileUrl)
}
}
}
</script>
</body>
</html>
当选择图片后,生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"
,能正常显示图片。
方法二: 利用FileReader.readAsDataURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
const fr = new FileReader(file)
fr.readAsDataURL(file)
fr.onload = function () {
$img.src = this.result
}
}
}
</script>
</body>
</html>
img标签的src将会是像这样:"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==
,能够正常显示。
上传图片,预览并保存成blob类型 和 base64的更多相关文章
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- previewImage.js图片预览缩放保存插件
previewImage.js好用的图片预览缩放保存插件
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
随机推荐
- \ HTML5开发项目实战:照片墙
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 本地代码上传至git仓库
1.进入项目文件夹,初始化 git init 2.添加文件到版本库 git add . 3.提交文件 git commit -m "初次提交" 4.关联远程仓库 git remot ...
- 数据结构---Java---HashMap---JDK1.7
源码解读 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Clone ...
- rabbitmq安装-1
原文地址和下载地址 原方地址: https://www.cnblogs.com/jiagoushi/p/9961388.html rabbitmq下载地址: https://github.com/ra ...
- python读取数据库mysql报错
昨天在学习PYTHON读取数据库的知识时,一直在报错,找不到原因. 最后同事说是语法错误. import sysreload(sys)sys.setdefaultencoding('gb18030') ...
- (59)C# IIS Express 设置
支持非localhost访问 本地测试时 修改 localhost改成127.0.0.1
- CTF 密码学(一)
0x00 前言 为了练习python,强迫自己能用Python的题都用python解题还有各种密码 0x01 奇怪的字符串 实验吧题目:信息保密的需求和实际操作自古有之,与之相应的信息加密与解密也是历 ...
- Centos7安装 Hadoop(单节点)
1.Hadoop简介 Hadoop是一个由Apache基金会所开发的开源分布式系统基础框架,使用Java开发,是处理大规模数据的软件平台. Hadoop可以从单一节点扩展到上千节点.用户可以在不了解分 ...
- 安全服务——CVE中CVSS相关指标介绍
目录 CVSS相关指标 一.CVSS是什么 二.指标内容 1.Base指标 2.Temporal指标 3.Environmental指标 三.Base, Temporal, Environmental ...
- Python中反射的简单应用
● 共两个文件:userInfo,reflex.py alex|123456|Manager hezewei|666|Student taibai|2222|Teachar userInfo #!/u ...