HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)
原文地址:http://www.2cto.com/kf/201401/274752.html
一、要解决什么样的问题?
在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式。这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证。这样就造成了一定的服务器资源浪费。但是html5时代,这个工作我们完全可以交给前端来做了。
另一方面,html5时代,许多我们原来的图片预览方案都失效了。究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真实的物理地址,而统一变成:C:\fakepath\xxx.xxx 这样的假地址。不过,天无绝人之路,虽然旧的方案失效了,但是html5还是给我们提供了其它的途径的。
那么,以上的问题我们该怎么解决呢?这就要借助html5提供的File API了。这里我们需要要用到的API是“ FileReader ”。
二、关于FileReader
顾名思义,FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。
FileReader有四种读取文件的方式,四种方式的区别如下:
1. readAsBinaryString ---- 将文件读取为二进制码
2. readAsDataURL ---- 将文件读取为 DataURL
3. readAsText ---- 将文件读取为文本
4. readAsArrayBuffer ----将文件读取为ArrayBuffer
因为还要做图片预览,所以我们这里将采用第二种readAsDataURL方式来读取文件。那么DataURL究竟是怎么样的一种格式呢?以下是截取的一个gif图片的DataURL格式。
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH...oJCAcGBQQDAgEAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==
所谓的DataURL格式,其实就是:data:[文件格式];base64,[文本流base64编码]
这种格式有什么好处呢?对于前端来说,最直观的好处就是,可以把它写进img标签的src,也可以写进css的background-image。这样就可以把一张图片直接塞进html代码或者css代码中,而不必再多一次http request。
讲到这里,很多童鞋或许已经对有点眉目了,接着往下看。
三、图片格式验证方案
做过后台验证文件格式的童鞋应该知道,许多文件格式,是有固定的文件头的(文件的文本流开头几个字节)。我们的JPEG、GIF、PNG等图片,也有这样的文件头。所以,我们现在就是要通过这个文件头来对图片格式进行严格验证,就在前端,纯JS,不需要借助任何后台脚本的帮助。
刚刚说到,readAsDataURL方式读取的文件,会得到文件文本流的base64编码。所以,我们其实只需要对比一下base64编码的头几个字符就可以知道我们将要上传的文件格式是什么样的。经过我的多次验证,JPEG、GIF、PNG的DataURL编码格式如下:
jpg格式如下:
data:image/jpeg;base64,/9j/4... png格式如下:
data:image/png;base64,iVBORw... gif格式如下:
data:image/gif;base64,R0lGOD...
也就是说,jpeg图片的base64编码开头总是/9j/4,png的开头总是iVBORw,而gif的开头总是R0lGOD。所以,至此,我们的验证方案其实已经浮出水面了。
四、图片上传预览及验证函数
下面是综合上面说的所有知识我自己写的一个函数,在此提供给大家:
function previewImage(file, prvid) {
/* file:file控件
* prvid: 图片预览容器
*/
var tip = "Expect jpg or png or gif!"; // 设定提示信息
var filters = {
"jpeg" : "/9j/4",
"gif" : "R0lGOD",
"png" : "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if (window.FileReader) { // html5方案
for (var i=0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if (!validateImg(src)) {
alert(tip)
} else {
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降级处理
if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) {
alert(tip);
} else {
showPrvImg(file.value);
}
} function validateImg(data) {
var pos = data.indexOf(",") + 1;
for (var e in filters) {
if (data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
} function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
}
}
使用示例:
<input id="files" type="file" onchange="previewImage(this, 'prvid')" multiple="multiple">
<div id="prvid">预览容器</div>
五、兼容性
本函数兼容chrome、firefox、ie6+ 。 但由于ie9以下的浏览器并不支持FileReader,所以,在验证图片格式的时候,会有一个降级处理。
HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)的更多相关文章
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5文件上传前本地预览
HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
随机推荐
- 4.nginx动静分离
动静分离,就是将css.js.jpg等静态资源和jsp等动态资源分开处理,以此提高服务器响应速度,提高性能. 核心就是区分动态和静态资源 图片转自:https://www.cnblogs.com/xi ...
- Android Watchdog
http://androidxref.com/6.0.1_r10/xref/frameworks/base/services/core/java/com/android/server/Watchdog ...
- android中Zing二维码扫描,二维码生成
Android中二维码扫描的最常用库是zxing和zbar,zxing项目地址为https://github.com/zxing/zxing,目前还有多个人在维护.zbar主要用C来写的,对速度有要求 ...
- Spring异常:Annotation-specified bean name.. for bean class ...
Spring重命名问题.对照项目中的注解,查找@Service是否重重名.由于Spring是在注解下按配置扫描的方式去创建对象的,那么两个重名的注解也就不成立了. 备注,特别注意test包下有没有通过 ...
- 搭建github静态博客
github设置 建立新的repository,命名为OwnerName.github.io,例如gotochenglong.github.io git管理 设置ssh密匙 使用命令ssh-keyge ...
- XNA 中3D模型的显示
XNA 中3D模型的显示: ModelMeshPart[] meshParts; Model start_model; Matrix[] dq_model_transforms; Matrix vie ...
- DB2 移动数据总结一
数据移动参考的连接 IMPORT http://www-01.ibm.com/support/knowledgecenter/SSEPGG_9.7.0/com.ibm.db2.luw.admin.cm ...
- Missy
毕业两年了,非常怀念大学生活.有时间还想回去看看,为什么我的眼里常含着泪水,因为我对这片土地爱的深沉. 你问我大学时最后悔的事情是什么,可能是没有对她说 I like you 吧,至今偶尔也会想起她. ...
- 针对浏览器不支持JavaScript的简单处理
简单的思路是这样的: 在网页中显示某些内容,作为不支持JS的提示, 然后在页面载人的时候执行一段JS代码,代码的功能就是隐藏那个提示不支持JS的代码 具体内容看例子: <html> < ...
- java--线程状态【转】
1.新建状态 Thread t1 = new Thread(); 创建之后,就已经有了相应的内存和其他资源,但是还是处于不可运行状态. 2.就绪状态 当一个线程使用.start()启动之后就处于就绪状 ...