场景： 获取到一个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==，能够正常显示。

原文链接：https://juejin.im/post/5b5187da51882519ec07fa41

上传图片，预览并保存成blob类型 和 base64的更多相关文章

  1. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  2. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  4. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  5. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  6. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  7. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  8. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  9. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

随机推荐

  1. 1.初步了解IOC容器

    学习地址:腾讯课堂   https://ke.qq.com/course/28986?_bid=167&_wv=3&from=iosapp 1.什么是IOC容器 定义: 1.是一个可以 ...

  2. js console对象

    js调试 根据信息的不同性质,console对象显示信息的方法,分别是一般信息console.log(),console.info().除错信息console.debug().警告提示console. ...

  3. nmap使用笔记

    扫描全端口判断服务 nmap ip -T4 -Pn -sV -p 1-65535 扫描端口并且标记可以爆破的服务 nmap ip --script=ftp-brute,imap-brute,smtp- ...

  4. demo_service

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  5. linux-usb软件系统架构

    1.软件系统架构 USB主控制器,芯片里面自带了得.为了让USB主控制器运行,所有有USB主控制器驱动. USB核心,内核提供好的USB协议之类的.USB设备驱动是针对插到接口的设备去工作的软件. 主 ...

  6. thinkphp 连接postgresql

    PHP连接: php.ini中将extension=php_pgsql.dll前面的分号去掉extension=php_pdo_pgsql.dll前面的分号去掉,然后设置extension_dir指向 ...

  7. 集合类不安全之ArrayList

    1. 不安全的ArrayList 大家都知道ArrayList线程不安全,怎么个不安全法呢?上代码: public class ContainerNotSafeDemo { public static ...

  8. 46、tensorflow入门初步，手写识别0,1,2,3,4,5,6

    1.使用tensorflow的SoftMax函数,对手写数字进行识别 Administrator@SuperComputer MINGW64 ~ $ docker run -it -p 8888:88 ...

  9. linux命令行光标移动技巧

    看一个真正的专家操作命令行绝对是一种很好的体验-光标在单词之间来回穿梭,命令行不同的滚动.在这里强烈建立适应GUI节目的开发者尝试一下在提示符下面工作.但是事情也不是那么简单,还是需要知道“如何去做” ...

  10. 巧妙的使用jmeter来发送json格式数据

    1. header-manager 修改content-type值. 如果不修改该值, 则默认会是urlencode的数据格式(例如a=5&b=6). 修改为json后,会告诉服务器,发送的数 ...