其实,图片预览功能非常地常见。很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过。现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件。在此分享一下思路。

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

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

①订阅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以上:(这里贴出多张图片预览的代码)

	 if(maxPics){	           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>

完成!完整项目请点击我的github!欢迎关注,给我一个点个start哦!^_^

不过,这里有一个就是其实没办法判断客户端是否将不是图片的文件通过修改后缀名来上传,只能通过服务器端来判断!

JS图片上传预览插件制作(兼容到IE6)的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  3. JS图片上传预览

    HTML部分: <img id="avatar" class="editable img-responsive" alt="头像" s ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  7. js:s上次预览,上传图片预览,图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  9. H5 实现图片上传预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. SUSE Linux下新建Weblogic 10.3非admin服务

    Linux内核版本信息查询命令 cat /proc/version 显示内容为: Linux version 2.6.16.60-0.85.1-smp(geeko@buildhost) (gcc ve ...

  2. POJ2396 Budget(有源汇流量有上下界网络的可行流)

    题目大概给一个有n×m个单元的矩阵,各单元是一个非负整数,已知其每行每列所有单元的和,还有几个约束条件描述一些单元是大于小于还是等于某个数,问矩阵可以是怎样的. 经典的流量有上下界网络流问题. 把行. ...

  3. MySQL安装常见错误及解决方案

    错误1:wizard安装最后一页,出现cannot create Windows service for mysql.error:0 错误 解决方法:打开命令行 输入 sc delete mysql ...

  4. 一起C语言中程序时序问题的排查过程

    [文章摘要] 对于由多个模块协同工作的软件来说,程序处理的时序是很重要的.当消息处理的顺序出现混乱时,程序就会出现异常. 本文基于作者的实际项目经验.对软件模块之间的时序问题进行了具体的分析,为相关软 ...

  5. GitHub创建SSH Keys

    第一步:在用户主目录下,看有没有.ssh目录,如果有,再看看这个目录下 有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步,如果没有 打开Git Bash,创建SSH ...

  6. 滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)

    //用firefox变量表示火狐代理var firefox = navigator.userAgent.indexOf('Firefox') != -1;function MouseWheel(e){ ...

  7. python——面向对象相关

    其他相关 一.isinstance(obj, cls) 检查是否obj是否是类 cls 的对象 1 2 3 4 5 6 class Foo(object):     pass   obj = Foo( ...

  8. 【Java框架型项目从入门到装逼】第二节 - Spring框架 AOP的丧心病狂解说,你喜欢露娜的月下无限连吗?

    继续上一节的内容,多几个jar包: aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的O ...

  9. [Python数据挖掘]第5章、挖掘建模(上)

    一.分类和回归 回归分析研究的范围大致如下: 1.逻辑回归 #逻辑回归 自动建模 import pandas as pd from sklearn.linear_model import Logist ...

  10. 第十六节,卷积神经网络之AlexNet网络实现(六)

    上一节内容已经详细介绍了AlexNet的网络结构.这节主要通过Tensorflow来实现AlexNet. 这里做测试我们使用的是CIFAR-10数据集介绍数据集,关于该数据集的具体信息可以通过以下链接 ...