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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
javascript 模拟点击广告
Jan 02 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
JS自定义滚动条效果
Mar 13 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python函数返回多个值的示例方法
2013/12/04 Python
python版学生管理系统
2018/01/10 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
销售团队激励口号
2014/06/06 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
个人总结与自我评价
2014/09/18 职场文书
个人收入证明范本
2014/09/18 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
合作协议书模板
2014/10/10 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
小学班主任事迹材料
2014/12/17 职场文书
花田少年史观后感
2015/06/16 职场文书
七年级思品教学反思
2016/02/20 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技