纯浏览器端的图片预览

preview v1.2.0

纯浏览器端的图片预览组件
支持IE5.5~IE11、Chrome、FF、Safari和Opera

Usage

<input type="file" id="icon1" accept="image/jpeg"/>&nbsp;<button onclick="pv1.reset()">重置</button> <div class="preview" id="pv1"></div> <input type="file" id="icon2" accept="image/jpeg"/>&nbsp;<button onclick="pv2.reset()">重置</button> <div class="preview" id="pv2"></div> <script type="text/javascript" src="./preview.js"></script> <script type="text/javascript"> var get = function(id){ return document.getElementById(id); }; Preview.defaults.onlegal = false; Preview.defaults.onillegal = true; var pv1 = new Preview(get('icon1'), get('pv1'), { onlegal: function(path, ext, accept){ alert(pv1 === this); alert('文件路径:' + path); alert('文件后缀:' + ext); alert('期待的MIME类型:' + accept); return true; }, onillegal: false }); var pv2 = Preview(get('pv2'), get('icon2')); </script>

v1.2.0

Preview构造函数添加opts配置入参,具体配置项如下:
onlegal,当路径后缀与file的accept属性值匹配时触发,返回true(默认值)时将预览图片,false则预览图片。
onillegal,当路径后缀与file的accept属性值不匹配时触发,返回true时将预览图片,false(默认值)则预览图片。
添加Preview.defaults.onlegal=truePreview.defaults.onillegal=false默认配置项。

v1.1.0

图片预览实例添加reset()方法,用于重置组件;
Preview构造函数入参由原来的顺序设置fileEl,previewEl改为无序设置。

v.1.0
全局重构

v.0.5
IE10+通过window.URL.createObjectURL替代FileReader,缩短Data URI Scheme长度从而提高性能。

v0.4
新增上传文件MIME类型筛选。默认值为image/*,通过input的accept属性值设置。

v0.3
修复FF3.0不支持FileReader的bug。

v0.2
修复IE11下当document.documentMode < 10时无法预览图片的bug。

v0.1
通过滤镜和FileReader实现图片预览功能。

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。