使用JQ加载图片,实现上传前先浏览.支持IE8+,火狐,Chrome,不支持Safari

一同事在图片这一块遇到了不少兼容性问题,我结合网络上的资料写了一个预览功能,支持多图片加载,支持自定义图片格式,支持图片检测,支持错误取消.

话不多说,直接上传代码.

imgpreview.js 文件如下.

/*! ImgPreView v0.0.3 ck 图片本地浏览,支持ie8+, 不支持safari,请直接设置监听imgPreView.onImgFileChange */
(function(w){

	var imgPreView = {
		//需求的宽高
		canWidth : 1024,
		canHeight : 768,
		//检查宽高
		checkSize : false,
		//允许载入多张图片,不支持IE
		loadMultImg : true,
		//上传的文件ID
		fileId : "",
		//要显示的图片所在位置的父ID,如果允许useDefaultImg设置为false,表示要显示的图片的id.
		imgsId : "",
		//图片显示的ID编号,默认从0开始递增
		imgId : "imgView",
		//默认显示
		defaultShow : true,
		//使用默认图片,意思就是说img元素已经在body里进行了创建,不需要重新再创建新的img标签.只在单个显示中有效.
		useDefaultImg : false,
		//图片的显示风格,可以自定义修改..
		imgStyle : "<img src='' />",
		// 检查浏览器版本
		checkExpoler : function(value) {
			var explorer = navigator.userAgent;
			return explorer.indexOf(value) >= 0;
		},
		//文件改变监听
		onImgFileChange : function() {
			var ipv = imgPreView;
			var imgSrc = $(this)[0].value;

			//safari不支持
			if(ipv.checkExpoler("Safari") && !ipv.checkExpoler("Chrome")) {
				alert("该插件不支持safari浏览器.请使用mac版的Chrome浏览器")
				return;
			}
			if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
					imgSrc = "";
					ipv.clearFileField();
					ipv.clearImageField();
					return false;
			}
			
			//如果不使用默认的图片,那么每次加载的时候都需要清空imgs域
			if(!ipv.useDefaultImg) {
				$("#imgs").empty();
			}
			
			//IE走这个.
			if (ipv.checkExpoler('MSIE')) {
				ipv.loadSingleImage(imgSrc);
			}else{
			//其余走这个
				var files = $(this)[0].files;
				//允许载入多张图片并且不适用默认img元素.
				if(ipv.loadMultImg && !ipv.useDefaultImg) {
					ipv.loadMultImage(files);
				} else {
					ipv.loadSingleImage(files);
				}
			}
		},

		//载入单个图片,为IE时obj是URL,为其他时是files
		loadSingleImage : function(obj) {
			var ipv = imgPreView;
			var tImgId = "#" + ipv.imgId + 0;
			var url = "";
			if(ipv.checkExpoler('MSIE')) {
				url = obj;
			}else {
				var file = obj[0];
				url = ipv.getImageUrl(file);
			}
			//使用默认的图片.
			if(!ipv.useDefaultImg) {
				ipv.createImage(ipv.imgsId, ipv.imgId + 0);
				$(tImgId).bind("load", ipv.imgloaded);
				$(tImgId).attr("src", url);
			} else {
				$("#"+ipv.imgsId).attr("src", url);
				$("#"+ipv.imgsId).unbind("load", ipv.imgloaded);
				$("#"+ipv.imgsId).bind("load", ipv.imgloaded);
				
			}

		},

		// 载入多图片,不会再IE上面使用.
		loadMultImage : function(files) {
			var ipv = imgPreView;
			var tImgId = "#" + ipv.imgId;
			for(var i = 0; i < files.length; i++) {
				var file = files[i];
				var url = ipv.getImageUrl(file);
				ipv.createImage(ipv.imgsId, ipv.imgId + i);
				$(tImgId + i).load(ipv.imgloaded);
				$(tImgId + i).attr("src", url);
				
			}
		},

		//获取图片的url地址.
		getImageUrl : function(file) {
		  var url = null ;   
		  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
		  if (window.createObjectURL!=undefined) { // basic  
			url = window.createObjectURL(file) ;  
		  } else if (window.URL!=undefined) { // mozilla(firefox)  
			url = window.URL.createObjectURL(file) ;  
		  } else if (window.webkitURL!=undefined) { // webkit or chrome  
			url = window.webkitURL.createObjectURL(file) ;  
		  }  
		  return url ;  
		},

		//创建一个img在指定的位置
		createImage : function(fatherid, id) {
			var ipv = imgPreView;
			var imgHtml = ipv.imgStyle;
			var style = "";
			var father  = $("#"+fatherid);
			father.append(imgHtml);

			var endImg = $("#" + fatherid + " img:last-child");
			endImg.attr("id", id);
			//如果默认不显示,那么要加入style风格
			if(!ipv.defaultShow) {
				
				if(ipv.checkExpoler('MSIE 8.0')) {
					//style = "style='visibility:hidden;'"; 
					endImg.css("visibility", "hidden");
				} else {
					//style = "style='display:none;'"; 
					endImg.css("display", "none");
				}
			}
			//IE8是拿不到隐藏图片的宽高的,所以不能把图片隐藏.
			
			
		},

		//图片载入的时候.
		imgloaded : function(event) {
			var ipv = imgPreView;
			//如果不检测,那么不管
			if(!ipv.checkSize) {
				return;
			}
			var imgTag = event.currentTarget;
			var width = 0;
			var height = 0;
			//8.0是拿不到隐藏的图片宽高的
			if(ipv.checkExpoler('MSIE 8.0')) {
				width = imgTag.clientWidth;
				height = imgTag.clientHeight;
			} else {
				width = imgTag.naturalWidth;
				height = imgTag.naturalHeight;
			}

			
			if(width != ipv.canWidth || height != ipv.canHeight) {
				ipv.hideImg(imgTag);
				$(imgTag).attr("src", "");
				ipv.clearFileField();
			} else {
				ipv.showImg(imgTag);
			}
			
		},

		//显示图片
		showImg : function(obj) {
			var ipv = imgPreView;
			if(ipv.checkExpoler('MSIE 8.0')) {
				$(obj).css("visibility", "visible");
			} else {
				$(obj).css("display", "inline");
			}
		},

		//隐藏图片
		hideImg : function(obj) {
			var ipv = imgPreView;
			if(ipv.checkExpoler('MSIE 8.0')) {
				$(obj).css("visibility", "hidden");
			} else {
				$(obj).css("display", "none");
			}
		},

		//清理文件域
		clearFileField : function() {
			var ipv = imgPreView;
			var file = $("#" + ipv.fileId);
			var cloneFile = file.clone().val("");
			file.after(cloneFile);      
			file.remove(); 
			cloneFile.bind("change", ipv.onImgFileChange);
		},
		//清理图像域
		clearImageField : function() {
			var ipv = imgPreView;
			var imgs = $("#" + ipv.imgsId);
			if(ipv.useDefaultImg) {
				ipv.hideImg(imgs);
			} else {
				//直接清空
				imgs.empty();
			}
		}
	};
	
	window.imgPreView = imgPreView;

})(window);

测试html如下

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML5上传图片预览</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="jquery-1.8.3.min.js"></script>  
</head>  
<body>  
<h3>请选择图片文件：JPG/GIF</h3>  
<form name="form0" id="form0" enctype="multiple/form-date" >  
	<input type="file" name="file0" id="file0" multiple="multiple" />
	<br>
	<div id="imgs">
	<img src="" id="img0" >  
	</div>
</form>  
<script src="imgpreview.js" ></script>
<script type="text/javascript">    

$(function(){
	imgPreView.fileId = "file0";
	imgPreView.imgsId = "imgs";
	imgPreView.loadMultImg = true;
	imgPreView.defaultShow = false;
	imgPreView.useDefaultImg = false;
	imgPreView.checkSize = true;
	$("#file0").bind("change", imgPreView.onImgFileChange);  
});

</script>  
</body>  
</html>