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

追根溯源

设想

一开始，按照我的思路，预览可能是这么来实现的。本地选中一张图片，嵌入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。

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

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

# js图片上传预览  # js图片上传  # js图片预览  # js上传预览  # JS实现上传图片的三种方法并实现预览图片功能  # js实现图片上传并预览功能  # js实现上传图片预览的方法  # 上传图片预览JS脚本 Input file图片预览的实现示例  # js实现上传图片之上传前预览图片  # Javascript图片上传前的本地预览实例  # js图片上传前预览功能（兼容所有浏览器）  # js 上传图片预览问题  # JS上传前预览图片实例  # 如何利用原生JS实现图片预览加上传(前后端交互)  # 上传  # 是在  # 有很多  # 图片上传  # 来实现  # 就可以  # 是一个  # 实现了  # 器上  # 这一  # 追根溯源  # 好了  # 也就  # 多个  # 您可以  # 只会  # 也很  # 微软  # 可以通过  # 就把 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在建站宝盒中设置产品搜索功能？  企业网站制作这些问题要关注  Android滚轮选择时间控件使用详解  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  利用 Google AI 进行 YouTube 视频 SEO 描述优化  打造顶配客厅影院，这份100寸电视推荐名单请查收  UC浏览器如何设置启动页 UC浏览器启动页设置方法  Laravel怎么判断请求类型_Laravel Request isMethod用法  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  如何自定义建站之星网站的导航菜单样式？  C#如何调用原生C++ COM对象详解  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  如何用搬瓦工VPS快速搭建个人网站？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  如何为不同团队 ID 动态生成多个非值班状态按钮  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  如何用已有域名快速搭建网站？  如何正确下载安装西数主机建站助手？  Laravel中的Facade(门面)到底是什么原理  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  如何在搬瓦工VPS快速搭建网站？  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  如何获取PHP WAP自助建站系统源码？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  ,南京靠谱的征婚网站？  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  如何在新浪SAE免费搭建个人博客？  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  香港服务器租用每月最低只需15元？  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  如何在IIS中配置站点IP、端口及主机头？  如何快速搭建高效香港服务器网站？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全