本文深入解析前端图片上传预览的实现原理，重点讲解HTML5 FileReader API及DataURL编码格式。通过实例演示如何将本地图片转换为Base64编码并在页面展示，最后提供原生JavaScript的简易封装组件及多浏览器兼容性测试结论。
引言与背景
当前网络上存在大量功能完善且界面美观的图片上传预览插件，使用便捷。以往仅停留在使用层面，未深究其底层逻辑。借此机会，深入探究其背后的实现机制。
追根溯源
设想
起初，我设想通过本地选择图片后嵌入HTML并显示其本地绝对路径，再经JS简单设置来实现预览效果。
实际上，仅低版本IE浏览器支持此方式。因浏览器厂商强化安全策略，限制了file标签直接读取本地路径的能力。在HTML5标准下，必须通过FileReader API来满足该需求。例如CSDN博客上传图片，获取的仅为fakepath，具体表现可见相关截图。
图片预览原理分析
原理
FileReader是HTML5提供的文件读取API，其作用是将文本流按指定格式读取至缓存，供JS调用。
FileReader提供四种文件读取方式： 1. readAsBinaryString：以二进制字符串形式读取
2. readAsDataURL：以Data URL形式读取
3. readAsText：以文本形式读取
4. readAsArrayBuffer
针对本次实现目标，采用第二种方式（readAsDataURL）即可。img标签的src属性直接指向该图片编码后的Data URL，具体效果如图。
DataURL浅析
Data URL涉及内容较多，本次仅作浅层基础了解。
格式
Data URL遵循固定格式，结构如下：
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控制
接下来实现预览功能，核心目标是将图片转换为Data URL，并对预览区域执行子元素添加操作。
<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。
大致内容如此，有需要的读者可直接取用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。