js实现图片上传预览原理分析
目前网上有很多支持图片上传时进行预览的插件，功能完备，界面优雅，使用起来也很方便。一直以来也就只是用用，没有想过这些插件背后的实现原理。趁着今天有点时间，也来学习学习。
追根溯源
设想
一开始，按照我的思路，预览可能是这么来实现的。本地选中一张图片，嵌入html的同时会显示图片的本地的绝对路径，然后通过js简单的进行设置，应该就可以实现预览效果了。
但是实际上，目前只有低版本的ie浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步强化安全，限制了file标签直接读取本地路径的能力，在html5下只有通过filereader的api来实现这一需求了。
比如对于csdn写博客的时候上传一张图片，得到的只会是一个fakepath。有图为证：
原理
filereader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存，以供js调用。
filereader有四种读取文件的方式：
1.readasbinarystring读取为二进制码
2.readasdataurl读取为 dataurl
3.readastext读取为文本
4.readasarraybuffer
根据本次实现的目标，使用第二种方式即可。img标签的src就是这个图片的编码后的dataurl。如图所示：
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格式的图片编码信息
预览实现
好了，弄明白了这些原理性的东西，就可以着手进行实现了。
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>
预览效果
总的来说代码就算是完成了，接下来看下实现的效果。由于没有设置样式，所以看起来很简陋，有兴趣的自己用样式控制一下即可。
打包封装
简易封装
为了方便实用，特使用原生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浏览器上，发现可以正常工作。
接下来是在edge浏览器上的测试。（发现样式不兼容）
不出所料，ie系的浏览器样式都没能兼容。
最终发现，chrome等webkit内核的浏览器可以完美支持，对于微软系浏览器而言，功能可以满足，但是样式上不兼容，这点可以通过特定的浏览器头来实现，不再过多叙述。
总结
总的来说，关于图片上传时的预览功能，实用性还是很强的。对于一个网站可以算是一个加分项。当然了，该网站有一个设计感不错的美工或者前端，不像我做出的页面好难看(⊙﹏⊙)b。
大概就是这样咯，有需要的尽管拿去使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。