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

目前网上有很多支持上传图片时预览的插件，功能齐全，界面优雅，使用方便。一直以来，它只是被使用，没有考虑这些插件背后的实现原理。利用今天的一点时间学习。

追溯某物的来源

想象

一开始按照我的思路，预习可能是这样实现的。在本地选择一张图片，嵌入html并显示图片的本地绝对路径，然后通过js简单设置，应该可以实现预览效果。

但实际上，只有IE浏览器的低版本才能达到这种效果。原因是浏览器厂商为了进一步加强安全性，限制了文件标签直接读取本地路径的能力，而这一要求只能通过HTML5下的FileReader的API来实现。例如，当CSDN在博客中上传一张图片时，它只会得到一个fakepath。有图为证：

原则

FileReader是html5提供的读取文件的api。它的功能是根据js调用的指定格式将文本流读入缓存。

FileReader有四种读取文件的方法：1.readAsBinaryString作为二进制代码读取

2.readAsDataURL被读取为数据URL

3.readAsText作为文本阅读

4.readAsArrayBuffer

根据这次达到的目标，可以采用第二种方法。img标记的src是此图片的编码DataURL。如图所示：

数据URL分析

DataURL有很多内容需要学习，但这次相对简单，所以只需了解基础知识。

格式

DataURL有其固定的格式，如下所示：

Data:[文件格式]；Base64，[文本流的base64编码]。

例如：jpg格式： data : image/JPEG；Base64，/9j/4.PNG格式： data 3360 image/PNG；Base64，iVBORw.gif gif格式：data : image/gif；base64，R0lGOD.

png格式的图片编码信息

预览实施

嗯，了解了这些原则之后，我们就可以开始实施了。

超文本标记语言

formaction=' # '方法=' post '图例图片上传/图例字段集输入类型=' file ' name=' pic1 ' id=' pic1 ' on change=' preview(this)Multiple=' Multiple ' accept=' image/x-png，image/jpg，image/JPEG，image/gif' brbr/fieldset输入类型=' button ' value=' upload '/formdiv id=' container '/div在代码中使用了Html5的一些新功能。用于过滤要上传的图像格式。

JavaScript控件

下一步是实现预览功能。目标是将图片转换为DataURL，然后向预览区域添加子元素。

Script var msg='您可以上传png、jpg或gif格式的图片'；var filter={ 'jpeg': '/9j/4 '，' gif': 'R0lGOD '，' png ' : ' iVBORw ' }；函数预览(文件){ var container=document . getelementbyid(' container ')；container.innerHTML=if(窗口。FileReader) { for (var index=0，f；f=file . files[index]；index){ var file reader=new file reader()；file reader . onload=function(event){ var src path=event . target . result；if(！validateImg(srcpath)){ console . log(' H5 '消息)；} else { showPreviewImage(src path)；} };file reader . readasdataurl(f)；} } else { if(！/\.jpg $ | \。png $ | \。gif $/I . test(file . value)){ console . log(' native ' msg)；} else { showpreviewiimage(file . value)；} } }函数validateImg(数据){ console.log(数据)；var pos=data.indexOf('，')1；for(筛选器中的var e){ if(data . indexof(筛选器[e])===pos){ return e；} }返回null}函数showPreviewImage(src){ console . log(src)；var img=document . create element(' img ')；img.src=srcimg . style=' width :64 px；' height:auto'container . appendchild(img)；}/脚本预览效果

总的来说，代码完成了。我们来看看效果。因为没有风格，所以看起来很简单。如果你感兴趣，可以通过风格来控制。

包装和封装

简单包装

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

/** *由彪于2017/7/10创建*描述：一个用于预览上传图像的简单工具*博客： http://blog.csdn.net/marksinoberg * github : https://github.com/guoruibiao */函数imgpreviewer(配置){/* * *上传图片的标签身份证.*/这个。fileid=config。fileid/** *错误消息提示* @键入{ string } */this。tip=配置。小费；/** *包含img标签的容器的标识* @键入{ string } */this。containerid=config。containerid/** *预览img的半铸钢钢性铸铁(Cast Semi-Steel)样式* @键入{ string } */this。IMGstyle=config。IMGstyle/** * 过滤图片格式，可进行相对应的删减操作* @键入{{jpeg:字符串，gif:字符串，png:字符串}} */this.filter={ /** * jpg或者联合图象专家组格式的图片*/'jpeg': '/9j/4 '，/** * gif格式的图片*/'gif': 'R0lGOD '，/** * PNG格式的图片*/' png ' : ' iVBORw ' }；/** * 开始预览。自动调用原生Java脚本语言实现相关元素的定位以及渲染*/这个。preview=function(){ var file=document。getelementbyid(这。fileid)；var容器=文档。getelementbyid(这。container id)；container.innerHTML=/** *防止内部作用域覆盖问题* @ type { imgpreviewer } */var=this；//HTML5需要使用文件阅读器的相关应用程序接口来读取本地数据如果（窗口. FileReader) { //针对多个上传文件批量处理用于(var指数=0，f；f=文件。文件[索引]；index){ var文件读取器=new文件读取器()；文件阅读器。onload=function(event){ var src path=event。目标。结果；if(！那个。validateimg(src路径)){控制台。日志(这个。提示)；}否则{那。showpreviewimg(src路径)；} };文件阅读器。readasdataurl(f)；} } else { //低版本降级处理如果(!/\.jpg$|\ .png$|\ .gif $/I . test(文件。值)){控制台。日志(这个。提示)；}否则{那。showpreviewimg(文件。值)；} } } /** * 根据图片的base64编码格式查看图片是否符合要求* @param数据编码后的图片数据* @返回{ * } */this。validateimg=函数(数据){ var pos=数据。indexof('，')1；为此。过滤器中的var e){ if(数据。indexof(此。filter[e])===pos){ return e；} }返回null} /** *开始实现对图片的预览，根据this.imgStyle进行相关渲染操作* @ param src */this。showpreviewimg=函数(src){ var img=文档。创建元素(' img ')；img.src=srcimg。风格=这个。imgstyle集装箱。appendchild(img)；}}使用方式

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title test/title script src=' http : img-previewer。js '/script/head dyinput type=' file ' id=' file ' multiple onchange=' preview()' div id=' container '/div script function preview(){ var config={ tip : }请上传格式为png，gif或者使用联合图象专家组文件交换格式存储的编码图像文件扩展名的图片，文件Id: '文件'，容器Id: '容器'，imgStyle: '宽度：320像素8 :自动边界半径：64%;} var previewer=new ImgPrevirewer(配置);预览器。预览()；}/脚本/正文/html测试

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

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

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

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

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

总结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。