场景： 获取到一个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. @ResponseEntity返回值(怪异)

    定制相应头 /** * 将返回数据放在响应体中 * * ResponseEntity<String>:响应体中内容的类型 * @return */ //@ResponseBody @Req ...

  2. WebDriverAgent安装

    这次安装WebDriverAgent的过程可谓坎坷呀,最后还是大牛远程解决问题,自己的确差太远,记录一下过程吧 尽量升级Xcode到最新版,保持iPhone的版本大于9.3 终端进入目标文件夹WebD ...

  3. HttpClient类详解

    文章链接:https://blog.csdn.net/justry_deng/article/details/81042379 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了 ...

  4. Django框架的学习

    目前 Django 1.6.x 以上版本已经完全兼容 Python 3.x. 1. 指定django版本的安装 pip install django =1.11

  5. PHP disk_total_space() 函数

    定义和用法 disk_total_space() 函数返回指定目录的磁盘总容量,以字节为单位. 语法 disk_total_space(directory) 参数 描述 directory 必需.规定 ...

  6. struts2 paramsPrepareParamsStack拦截器简化代码（源码分析）

    目录 一.在讲 paramsPrepareParamsStack 之前,先看一个增删改查的例子. 1. Dao.java准备数据和提供增删改查 2. Employee.java 为model 3. E ...

  7. legend2---17、legend2里面怎么面向对象

    legend2---17.legend2里面怎么面向对象 一.总结 一句话总结: mvc本身挺优:本身mvc的开发模式,就算是面向过程下也还行,如果面向对象那就更加棒了 实体类无需属性:由于php的生 ...

  8. java中 抽象类和接口的区别

    一. 什么是抽象类及什么是抽象方法 抽象方法是一种特殊的方法:他只有声明,而没有具体实现,抽象方法的声明格式为: abstract void funName(); 抽象方法必须用 abstract 修 ...

  9. 二.通过jenkins对系统的监控(1)

    说明:通过jenkins定时请求系统,判断系统是否挂了. 注:windows环境 1.新建一个自由风格的项目. 2.构建触发器选择定时构建. 3.执行windows批处理命令 4.构建后操作,发邮件 ...

  10. 88、展示Tensorflow计算图上每个节点的基本信息以及运行时消耗的时间和空间

    ''' Created on May 24, 2017 @author: p0079482 ''' #使用程序输出日志 import tensorflow as tf with tf.Session( ...