上传图片，预览并保存成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 ...
随机推荐
- linux 出现 -bash-4.2# 问题的解决方法
1.在根目录创建 /root 目录 mkdir /root 2. 复制 .bashrc 以及 .bash_profile俩个文件到root目录下 cp /etc/skel/.bashrc /root ...
- 【Java程序】tesseract_orc java上的一种实现方法
今天想着把以前做过的一个Android的文字检测识别应用好好的回顾一下,因为以前写java程序,目的就是能用就行,不会仔细看每一个部分代码,也不会记他们的用法,不回会去查API,借鉴别人的例程,用过就 ...
- 使用pytorch测试单张图片（test single image with pytorch）
以下代码实现使用pytorch测试一张图片 引用文章: https://www.learnopencv.com/pytorch-for-beginners-image-classification-u ...
- python 常用技巧 — 字典 （dictionary）
目录: 1. python 相加字典所有的键值 (python sum all values in dictionary) 2. python 两个列表分别组成字典的键和值 (python two l ...
- MySQL数据类型DECIMAL用法详解
MySQL DECIMAL数据类型用于在数据库中存储精确的数值.我们经常将DECIMAL数据类型用于保留准确精确度的列,例如会计系统中的货币数据. 要定义数据类型为DECIMAL的列,请使用以下语法: ...
- Elasticsearch：使用function_score及soft_score定制搜索结果的分数
我们将介绍使用function_score的基础知识,并介绍一些function core技术非常有用和有效的用例. 介绍 评分的概念是任何搜索引擎(包括Elasticsearch)的核心.评分可以粗 ...
- PHP排序函数:sort()、rsort()、asort()、arsort()、ksort()、krsort()
sort()函数以升序对数组排序.rsort() 函数以降序对数组排序.asort() 函数对数组从低到高进行排序并保持索引关系.arsort() 函数对数组从高到低进行排序并保持索引关系.ksort ...
- python--前端之CSS
CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了C ...
- org.zkoss.zul.Filedownload.java 源码
/* Filedownload.java Purpose: Description: History: Mon Apr 16 09:29:44 2007, Created by tomyeh Copy ...
- Android中可以做的两件坏事---破解锁屏密码和获取Wifi密码
之前的文章一直在介绍OC,最近也是在找急忙慌的学习IOS,所以Android方面的知识分享就有点中断了,但是我现在还是要靠Android吃饭,所以不能Android的工作不能停呀,今天咋们来看一下我在 ...