这篇文章主要介绍了 JS 上传图片预览插件制作(兼容到 IE6)的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、实现图片预览的一些方法。
了解了一下,其实方法都是大同小异的。大概有以下几种方式:
①订阅 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('你上传的图片太大!');
- }
- }
至此,就完成啦!
用法:
以上所述是小编给大家介绍的 JS 上传图片预览插件制作(兼容到 IE6)的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源: http://www.phperz.com/article/17/0311/263739.html