一同事在圖片這一塊遇到了不少相容性問題,我結合網路上的資料寫了一個預覽功能,支援多圖片載入,支援自定義圖片格式,支援圖片檢測,支援錯誤取消.

話不多說,直接上傳程式碼.

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>