JS上传图片预览插件制作(兼容到IE6)


Posted in Javascript onAugust 07, 2016

一、实现图片预览的一些方法。

了解了一下,其实方法都是大同小异的。大概有以下几种方式:

①订阅input[type=file]元素的onchange事件.

一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上。

缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量。

②利用HTML5的新特性FileReader。

这个对象提供了很多相关的方法,其中最主要用到readAsDataURL这个方法。点我了解更多。

缺点:通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。且浏览器支持情况不一致,支持的浏览器:FF3.6+,Chrome7+,IE10+。

③使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE。

缺点:由于IE11作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到

D:\frontEnd\文件名称。因此需使用document.selection.createRangeCollection方法来获取真实地址。

二、我的插件制作

我选择了比较保守的方法,就是第三种使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE的方法啦。

①第一步,HTML的布局

<div id="pic">
<img id="preview" src="../imgs/default.jpeg">
</div>
<input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">

是不是想说so easy?

②第二步,插件js封装。

1、建立对象

我主要采用了组合继承的方式,封装了两个方法,分别是单张图片上传和多张图片上传。因为无论是单张图片上传还是单张图片上传,都需要传入、上传图片的input按钮、img标签、包裹着img的div、最大的单张照片的值,单位为KB。所以这四个参数在创建上传图片对象的时候就要传入。创建该对象的方法如下:

var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){
this.fileObj=fileObj;
this.preview=preview;
this.picWrap=picWrap;
this.maxImgSize=maxImgSize;
}

2、定义匹配模式

因为是上传图片,除了在input里面加了accept="image/*",做了初步限制之外,还需要一个js的正则来通过路径的检测来判定是否为图片。所以在prototype上面定义该模式以供两个方法使用:

SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)+$','i');

3、定义方法

主要就是判断是否低于IE11的环境,编写两类方案。第一种就是直接通过改变img的src来预览图片,第二种就是在低版本的IE下,通过滤镜来达到预览效果。

FF、Chrome、IE11以上:(这里贴出多张图片预览的代码)

<span class="Apple-tab-span"> if(maxPics){</span> <br> if(this.fileObj.files && this.fileObj.files[0]){
var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已经有多少张图片了
var num=imgs.length;
var html=this.picWrap.innerHTML;
if(Number(num)<Number(maxPics)){ //判断是否超过最大上传限度
if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆盖第一张默认图片
html='';
}
if(this.pattern.test(fileObj.files[0].name)){
if(judgeSize(fileObj.files[0].size/1024,this.maxImgSize)){//判断图片的大小是否超限
html='<img class="newLoad" style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html;
this.picWrap.innerHTML=html;
}else{
alert('你上传的图片太大!');
}
}else{
alert('你上传的好像不是图片哦,请检查!');
}
}else{
alert('每次最多上传'+maxPics+'张图片!');
}
}

IE11下利用滤镜达到效果:

var nums=this.picWrap.childNodes.length;//因为IE6以下不支持querySelectorAll等方法,就通过childNodes的长度判断
if(nums<maxPics+2){//这里加2是因为本来有一张默认的图片,而且childNodes读出来的长度会多1
this.fileObj.select();
if(document.selection){
var imgSrc=document.selection.createRange().text;
var image=new Image(); 
image.src=imgSrc; 
filesize=image.fileSize; 
if(judgeSize(image.fileSize/1024,this.maxImgSize)){
//IE下必须设置div的大小
var ele=document.createElement('div');
ele.style.width=width+'px';
ele.style.height=height+'px';
ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')";
try{
this.picWrap.appendChild(ele);
}catch(e){
alert('你上传的图片格式有误,请重新选择!');
return false;
}
this.preview.style.display='none';
document.selection.empty();
}else{
alert('你上传的图片太大!');
}
}

至此,就完成啦!

用法:

<script type="text/javascript" src="../js/singlePic.js"></script>
<script>
var fileObj=document.getElementById('uploadBtn');
var preview=document.getElementById('preview');
var picWrap=document.getElementById('pic');
fileObj.onchange=function(){
var obj=new SetPreviewPic(fileObj,preview,picWrap,100);
//定义上传图片对象,参数分别为上传图片的input按钮、img标签包、裹着img的div、最大的单张照片的值,单位为KB
obj.uploadSinglePic(200,250);//单张图片上传,参数分别为每张的宽度、高度
// obj.uploadPics(200,250,2); //多张图片上传,参数分别为每张的宽度、高度、最多上传张数
}
</script>

以上所述是小编给大家介绍的JS上传图片预览插件制作(兼容到IE6)的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js去除重复字符串两种实现方法
Jan 09 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
vue实现登录拦截
Jun 29 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 #Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 #Javascript
Google 地图API Map()构造器详解
Aug 06 #Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 #Javascript
Google 地图类型详解及示例代码
Aug 06 #Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
You might like
解析link_mysql的php版
2013/06/30 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Django如何将URL映射到视图
2019/07/29 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python中函数的返回值示例浅析
2019/08/28 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
应届大学生的推荐信
2013/11/20 职场文书
初中班主任教育随笔
2015/08/15 职场文书
高二英语教学反思
2016/03/03 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
MySQL数据库简介与基本操作
2022/05/30 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis