js实现图片上传预览原理分析


Posted in Javascript onJuly 13, 2017

目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。

追根溯源

设想

一开始,按照我的思路,预览可能是这么来实现的。本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了。

但是实际上,目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步强化安全,限制了file标签直接读取本地路径的能力,在HTML5下只有通过FileReader的API来实现这一需求了。
比如对于CSDN写博客的时候上传一张图片,得到的只会是一个fakepath。有图为证:

js实现图片上传预览原理分析

原理

FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。

FileReader有四种读取文件的方式:
 1.readAsBinaryString读取为二进制码

 2.readAsDataURL读取为 DataURL

 3.readAsText读取为文本

 4.readAsArrayBuffer

根据本次实现的目标,使用第二种方式即可。img标签的src就是这个图片的编码后的DataURL。如图所示:

js实现图片上传预览原理分析

DataURL浅析

DataURL 说来可是有很多内容要研究的,但是这次用的比较浅显,就把基础的了解下就行了。

格式

DataURL有其固定的格式,如下:

data:[文件格式];base64,[文本流base64编码]。

举个例子:
 •jpg格式: data:image/jpeg;base64,/9j/4...
 •png格式: data:image/png;base64,iVBORw...
 •gif格式: data:image/gif;base64,R0lGOD... 

•png格式的图片编码信息 

js实现图片上传预览原理分析

预览实现

好了,弄明白了这些原理性的东西,就可以着手进行实现了。

HTML

<form action="#" method="POST">
 <legend>
 图片上传
 </legend>
 <fieldset>
 <input type="file" name="pic1" id="pic1" onchange="preview(this)" multiple="multiple"
 accept="image/x-png, image/jpg, image/jpeg, image/gif">
 <br><br>
 </fieldset>
 <input type="button" value="上传">
</form>
<div id="container">


</div>

在代码中使用了Html5的一些新特性。用来过滤待上传的图片格式。

JavaScript控制

接下来就是预览功能的实现了。目标就是将图片转换成DataURL,然后对预览区进行子元素的添加操作。

<script>
 var msg = "您可以上传png, jpg, 或者gif格式的图片";
 var filter = {
 "jpeg": "/9j/4",
 "gif": "R0lGOD",
 "png": "iVBORw"
 };
 function preview(file) {
 var container = document.getElementById("container");
 container.innerHTML = "";
 if (window.FileReader) {
 for (var index=0, f; f = file.files[index]; index++) {

 var filereader = new FileReader();
 filereader.onload = function (event) {
 var srcpath = event.target.result;
 if (!validateImg(srcpath)) {
 console.log("H5"+msg);
 } else {
 showPreviewImage(srcpath);
 }
 };
 filereader.readAsDataURL(f);
 }
 } else {
 if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
 console.log("原生"+msg);
 } else {
 showPreviewImage(file.value);
 }
 }
 }

 function validateImg(data) {
 console.log(data);
 var pos = data.indexOf(",") + 1;
 for (var e in filter) {
 if (data.indexOf(filter[e]) === pos) {
 return e;
 }
 }
 return null;
 }

 function showPreviewImage(src) {
 console.log(src);


 var img = document.createElement('img');
 img.src = src;
 img.style = "width:64px;height:auto;"
 container.appendChild(img);
 }

</script>

预览效果

总的来说代码就算是完成了,接下来看下实现的效果。由于没有设置样式,所以看起来很简陋,有兴趣的自己用样式控制一下即可。

js实现图片上传预览原理分析

打包封装

简易封装

为了方便实用,特使用原生JavaScript封装了一个这样的组件。详细代码如下:

/**
 * Created by biao on 2017/7/10.
 * Description: A simple tool for previewing images for uploading.
 * Blog: http://blog.csdn.net/marksinoberg
 * GitHub: https://github.com/guoruibiao
 */

function ImgPrevirewer(config) {

 /**
 * The tag ID for upload images.
 */
 this.fileId = config.fileId;

 /**
 * tip for error message.
 * @type {string}
 */
 this.tip = config.tip;
 /**
 * The ID for the container which contains img tags.
 * @type {string}
 */
 this.containerId = config.containerId;
 /**
 * CSS style for previewing imgs.
 * @type {string}
 */
 this.imgStyle = config.imgStyle;

 /**
 * 过滤图片格式,可进行相对应的删减操作。
 * @type {{jpeg: string, gif: string, png: string}}
 */
 this.filter = {
 /**
 * jpg或者jpeg格式的图片。
 */
 "jpeg": "/9j/4",
 /**
 * gif格式的图片。
 */
 "gif": "R0lGOD",
 /**
 * PNG格式的图片。
 */
 "png": "iVBORw"
 };


 /**
 * 开始预览。自动调用原生JavaScript实现相关元素的定位以及渲染。
 */
 this.preview = function () {
 var file = document.getElementById(this.fileId);
 var container = document.getElementById(this.containerId);
 container.innerHTML = "";
 /**
 * 防止内部作用域覆盖问题。
 * @type {ImgPrevirewer}
 */
 var that = this;
 // HTML5 需要使用FileReader的相关API来读取本地数据。
 if (window.FileReader) {
 // 针对多个上传文件批量处理。
 for (var index = 0, f; f = file.files[index]; index++) {
 var filereader = new FileReader();
 filereader.onload = function (event) {
 var srcpath = event.target.result;
 if (!that.validateImg(srcpath)) {
 console.log(this.tip);
 } else {
 that.showPreviewImg(srcpath);
 }
 };
 filereader.readAsDataURL(f);
 }
 } else {
 // 低版本降级处理。
 if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
 console.log(this.tip);
 } else {
 that.showPreviewImg(file.value);
 }
 }
 }


 /**
 * 根据图片的base64编码格式查看图片是否符合要求。
 * @param data 编码后的图片数据。
 * @returns {*}
 */
 this.validateImg = function (data) {
 var pos = data.indexOf(",") + 1;
 for (var e in this.filter) {
 if (data.indexOf(this.filter[e]) === pos) {
 return e;
 }
 }
 return null;
 }

 /**
 * 开始实现对图片的预览,根据this.imgStyle进行相关渲染操作。
 * @param src
 */
 this.showPreviewImg = function (src) {
 var img = document.createElement('img');
 img.src = src;
 img.style = this.imgStyle;
 container.appendChild(img);
 }


}

使用方式

下面来一个简单的“模板式”使用技巧。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Test</title>
 <script src="img-previewer.js"></script>
</head>
<body>
<input type="file" id="file" multiple onchange="preview()">
<div id="container">

</div>

<script>

 function preview(){
 var config = {
 tip: "请上传格式为png, gif或者jpg的图片",
 fileId: "file",
 containerId: "container",
 imgStyle: "width:320px;height:auto;border-radius:64%;"
 }
 var previewer = new ImgPrevirewer(config);
 previewer.preview();
 }

</script>
</body>
</html>

测试

为了保证这个组件的稳定性,接下来来个简单的测试。

首先是在Chrome浏览器上,发现可以正常工作。

js实现图片上传预览原理分析

接下来是在Edge浏览器上的测试。(发现样式不兼容)

js实现图片上传预览原理分析

不出所料,IE系的浏览器样式都没能兼容。

js实现图片上传预览原理分析

最终发现,Chrome等WebKit内核的浏览器可以完美支持,对于微软系浏览器而言,功能可以满足,但是样式上不兼容,这点可以通过特定的浏览器头来实现,不再过多叙述。

总结

总的来说,关于图片上传时的预览功能,实用性还是很强的。对于一个网站可以算是一个加分项。当然了,该网站有一个设计感不错的美工或者前端,不像我做出的页面好难看(⊙?⊙)b。

大概就是这样咯,有需要的尽管拿去使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 #Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 #Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 #Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 #Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
PHP初学入门
2006/11/19 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
二级域名转向类
2006/11/09 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
python框架中flask知识点总结
2018/08/17 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
责任书格式范文
2014/07/28 职场文书
工厂采购员岗位职责
2015/04/07 职场文书