html上传图片预览,jquery实现

最新推荐文章于 2023-06-28 09:55:31 发布

夹尾狼

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量733

点赞数

分类专栏： javascript html jquery 文章标签： html jquery插件图片预览

本文链接：https://blog.csdn.net/u010847813/article/details/51025347

版权

javascript 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

想必大家在做图片上传时大部分都会在图片没有上传之前先进行本地预览，事情说起来简单，但是由于各大浏览器都有各自安全机制，需要实现图片预览就变得有点小麻烦，本文便是介绍笔者利用jquery实现在不同浏览器在图片上传时进行预览的jquery插件。现在分享给大家参考，如有任何改进或建议请一定要为笔者指出。(插件使用需要引入jquery)

js文件jqueryExtends.js

$.fn.extend({
	/**
	 * 图片上传本地预览
	 * 参数说明：
	 * imgId：image节点对象(必填)
	 * imgType：图片格式限制数组(可选)
	 * callBack：回调函数(可选)
	 * message：图片格式错误时是否弹出消息(可选boolean)
	 */
	imgPreview:function(imgId,imgType,callBack,message){
		var url = $(this).val();
		var opts = {
			imgType:["jpg","jpeg","gif","png","bmp"],
			message:function(statu){
				if(statu){
					alert("您选择的图片有误，仅支持" + this.imgType.join("、") + "图片格式上传！");
				}
			},
			callBack:function(data){}
		};
		//如果省略了参数，则进行参数转换
		if($.isFunction(imgType)){
			callBack = imgType;
			imgType = opts.imgType;
		}else if($.type(imgType) === "boolean"){
			message = imgType;
			imgType = opts.imgType;
			callBack = opts.callBack();
		}
		if($.type(callBack) === "boolean"){
			message = callBack;
			callBack = opts.callBack();
		}
		if(message === undefined){
			message = true;
		}
		//合并对象
		opts = $.extend(opts,{"imgType":imgType,"callBack":callBack});
		//图片格式验证
		if (!RegExp("\.(" + opts.imgType.join("|").toLowerCase() + ")$", "i").test(url.toLowerCase())) {
			//执行回调函数
             opts.callBack(false);
             //清空file
             this.defaultValue = "";
            //消息提示
             opts.message(message);
             return false;
    	}
		var img = $("#" + imgId);
		//IE下
		if($.browser.msie){
			//使用滤镜
			this.select(); 
			url = document.selection.createRange().text;
			//创建一个div设置背景作为图片预览
			var newPreview = document.createElement("div");
			newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
			newPreview.style.width = img.width();
			newPreview.style.height = img.height();
			//使用div标签替换img标签
			img.replaceWith(newPreview);
			//使用图片
			newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
		//other
		}else{
			if(this[0].files){
				var file = this[0].files[0];
				if (window.URL != undefined) {
	           		url = window.URL.createObjectURL(file);
		        }else if(window.webkitURL != undefined){
		        	url = window.webkitURL.createObjectURL(file);
		        }
			}
	        img.attr("src",url);
		}
		//执行回调函数
		opts.callBack(true);
		return true;
	}
});

使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="js/jqueryExtends.js" ></script>
		<title></title>
	</head>
	<script>
		function imgPreview(file){
			//调用插件
			$(file).imgPreview("img");
		}
	</script>
	<body>
		<center>
			<div>
				<img src="" id = "img" width="150" height="200"/>
			</div>
			<input type="file" style="width: 150px;" οnchange="imgPreview(this)"/>
		</center>
	</body>
</html>

简单粗暴有木有，本文例子只使用了一个参数，其它参数的使用，大家可自行尝试。