jQuery实现上传图片本地预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta content="" name="Keywords" />
<meta content="" name="Description" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/uploadPreview.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[type=file]").change(function(){
			//预览图片
			var $img = $(this).next();
			//最大 1M
			var maxSize = 1024;
			//获取文件大小
			var fileSize = this.files[0].size/1024; 
			if(fileSize>maxSize){
				alert('文件过大最大为：' + maxSize + ' KB ');
				return false;
			};
			//后缀正则表达式
			var reg = /^.+[.]png|.+[.]gif|.+[.]jpeg|.+[.]jpg|.+[.]bmp$/; 
			var val = $(this).val();
			if(reg.test(val)==false){
				alert('图片格式不正确,包含以下格式[gif,jpeg,jpg,bmp,png]');
				return false;
			}
			
			if($.browser.msie){//判断是否为ie浏览器
				$img.attr("src",$(this).val())
				
			}else{//不是IE浏览器
				var objUrl=getObjectURL(this.files[0]);
				console.log("objUrl="+objUrl);
				if(objUrl){
					$img.attr("src",objUrl);
				}
			}
		})
		//建立一個可存取到該file的url
		function getObjectURL(file) {
			var url = null ; 
			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) ;
			}else{
				alert('浏览器不支持预览功能！');	
			}
			return url ;
		}
});
</script>
</head>
<body>
<form id="form"  method="post">
<input type="file" />
<img class="img"/>
</form>
</body>
</html>
jQuery实现上传图片本地预览

猜你喜欢
