图片上传前的浏览插件

最新推荐文章于 2022-11-02 10:19:47 发布

piaohefeng

最新推荐文章于 2022-11-02 10:19:47 发布

阅读量297

点赞数

分类专栏： jquery 图片上传预览文章标签： function 浏览器 opera jquery file image

本文链接：https://blog.csdn.net/piaohefeng/article/details/7337369

版权

jquery 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

图片上传

2 篇文章 0 订阅

订阅专栏

预览

2 篇文章 0 订阅

订阅专栏

工作忙的焦头烂额，什么都要学，什么都要做，可悲的程序员！

昨天和今天不小心又得使用jQuery来做事，客户的一通电话要比老妈的一千句唠叨还可怕。。

废话不多说，上结果来给大家看看

在IE下显示是没有问题的。但是火狐和opera等浏览器下还有问题

为了解决这个问题查了不少资料，不过没有头绪

大家一致认为除了IE意外其他浏览器不允许访问本地硬盘，这是问题产生的原因。

jQuery.fn.ImgUpView = function(d,w,h){
	$(this).live("change",function(event){
		var fx = event.target.id.substr(4);
		var postfix = event.target.value.substring(event.target.value.lastIndexOf(".")+1);
		switch(postfix.toLowerCase()){
			case "jpg":
			case "gif":
			case "png":
			case "bmp":
				var img="<img src=\"file:///"+$(this).val()+"\" style=\"max-width:"+w+"px;max-height:"+h+"px;\" />";
				$("#"+d).html(img);
			break;
			default:
				$(this).after($(this).clone().val(''));
				$(this).remove();
				alert("It isn't image type!");
			break;
		}
	});
}

使用方法：

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jQuery.AntUI.upViewImg.js"></script>
<script type="text/javascript">
<!--
$("#f1").ImgUpView("imgs","300","300");//参数：显示的id名，最大宽度，最大高度
//-->
</script>
</head>
<body>
上传预览图片:<br>
<input type="file" id="f1" name="f1" />
<p id="imgs"></p>
</html>