js怎么实现图片上传预览原理

　　介绍

小编给大家分享一下js怎么实现图片上传预览原理,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

js是什么

js是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

<强>追根溯源

设想

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

但是实际上,目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步强化安全,限制了文件标签直接读取本地路径的能力,在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有其固定的格式,如下:

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

举个例子:
, ?jpg格式:数据:图像/jpeg; base64,/9 j/4…
, ?png格式:数据:图像/png; base64, iVBORw…
, ?gif格式:数据:图像/gif; base64, R0lGOD…,

<强大? png格式的图片编码信息,

js怎么实现图片上传预览原理

<强>预览实现

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

HTML

& lt; form  action=?”,方法=癙OST"比; 　　,& lt; legend> 　　,图片上传 　　,& lt;/legend> 　　,& lt; fieldset> 　　,& lt; input 类型=癴ile", name=皃ic1", id=皃ic1", onchange=霸だ?这)“,多个=癿ultiple" 　　,接受=巴枷?x-png,图像/jpg,图像/jpeg,图像/gif"比; 　　,& lt; br> & lt; br> 　　,& lt;/fieldset> 　　,& lt; input 类型=癰utton",价值=https://www.yisu.com/zixun/鄙洗?> 　　 　　 　　

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

JavaScript控制

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

& lt; script> 　　,var  msg =,“您可以上传png,, jpg,,或者gif格式的图片“; 　　,var  filter =, { 　　,“jpeg":“/9 j/4“, 　　,“gif":,“R0lGOD" 　　,“png":“iVBORw" 　　,}; 　　,function 预览(文件),{ 　　,var  container =, . getelementbyid (“container");=,container.innerHTML “,“; 　　,if  (window.FileReader), { 　　,for  (var 指数=0,,f。, f =, file.files(指数);,指数+ +),{ 　　 　　,var  filereader =, new  FileReader ();=,,filereader.onload  function (事件),{ 　　,var  srcpath =, event.target.result; 　　(!,if  validateImg (srcpath)), { 　　,console.log (“H5" +味精); 　　,}else  { 　　,showPreviewImage (srcpath); 　　,} 　　,}; 　　,filereader.readAsDataURL (f); 　　,} 　　,}else  { 　　(!/\ . jpg, if  $ $ | | \ . png、gif $/信息技术(file.value)), { 　　,console.log(“原生“+味精); 　　,}else  { 　　,showPreviewImage (file.value); 　　,} 　　,} 　　,} 　　 　　,function  validateImg(数据),{ 　　,console.log(数据); 　　,var  pos =, data.indexOf (“”), +, 1; 　　,for  (var  e 拷贝过滤器),{ 　　,if  (data.indexOf(过滤器[e]),===, pos), { 　　,return  e; 　　,} 　　,} 　　,return 零; 　　,} 　　 　　,function  showPreviewImage (src), { 　　,console.log (src); 　　 　　 　　,var  img =, document.createElement (& # 39; img # 39;);=,,img.src  src;=,img.style “宽度:64 px;高度:汽车;“ 　　,container.appendChild (img); 　　,} 　　 　　& lt;/script>

js怎么实现图片上传预览原理