input file上传图片预览(查看图片大小，类型，名字)------------------------------自己动手写jQuery插件

最新推荐文章于 2022-03-24 15:03:31 发布

置顶最骚的就是你

最新推荐文章于 2022-03-24 15:03:31 发布

阅读量3.9k

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/51568611

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

参考文章：http://blog.csdn.net/libin_1/article/details/50433863

最简单的实现方法：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<title></title>
		<style type="text/css">
			div.imger {
				width: 182px;
				height: 142px;
				border: 1px solid green;
				position: relative;
			}
			
			div.imger input {
				position: absolute;
				opacity: 0;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			
			div.imger img {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			div.imger span.closer {
				position: absolute;
				top: 10px;
				right: 10px;
				color: red;
				z-index: 10;
				cursor: pointer;
				display: none;
			}
			
			div.imgers {
				float: left;
				margin: 5px 10px 5px;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
		 	$(function() {
				function getObjectURL(file) {
					var url = null;
					if (window.createObjectURL != undefined) {
						url = window.createObjectURL(file)
					} else if (window.URL != undefined) {
						url = window.URL.createObjectURL(file)
					} else if (window.webkitURL != undefined) {
						url = window.webkitURL.createObjectURL(file)
					}
					return url
				};
				var strs = '<div class="imgers imger">' +
					'<input type="file" />' +
					'<img src="img/btn.png" />' +
					'<span class="closer">X</span>' +
					'</div>';
				$("div.imger").on('change', "input[type='file']", function(e) {
					var srcs = getObjectURL(this.files[0]);
					alert(srcs);
					/**************************/
					console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
					var tuozhanming = (this.files[0].name).split('.');
					console.log("文件拓展名:" + tuozhanming[1]);
					/*************************/
					$(this).next('img').attr('src', srcs).next('span.closer').show();
				});
				$("div.imger").on('click', 'span.closer', function() {
					$("div.imger input[type='file']").val('');
					$(this).hide().prev('img').attr('src', 'img/btn.png');
				});
				//-----------------------------------------------------------------------------//
				$("body").on('change', "div.imgers input[type='file']", function(e) {
					var srcs = getObjectURL(this.files[0]);
					alert(srcs);
					/**************************/
					console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
					/*************************/
					$(this).next('img').attr('src', srcs).next('span.closer').show();
					$(this).parent('div').after(strs);
				});
				$("body").on('click', 'div.imgers span.closer', function() {
					if ($("div.imgers").length > 1) {
						$(this).parent('div.imgers').remove();
					} else {
						$("div.imgers input[type='file']").val('');
						$(this).hide().prev('img').attr('src', 'img/btn.png');
					}
				});
			})
		</script>
		 
	</head>

	<body>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imgers imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>

	</body>

</html>

自己动手写jQuery插件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/imger.js"></script>
		<title></title>
		<style type="text/css">
			div.imger {
				width: 182px;
				height: 142px;
				border: 1px solid green;
				position: relative;
			}
			
			div.imger input {
				position: absolute;
				opacity: 0;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			
			div.imger img {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			div.imger span.closer {
				position: absolute;
				top: 10px;
				right: 10px;
				color: red;
				z-index: 10;
				cursor: pointer;
				display: none;
			}
			
			div.imgers {
				float: left;
				margin: 5px 10px 5px;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$("div.imger").imgers({
					width: '182', //这两个参数没用上
					height: '142',
					autoplus: false
				});
				$("div.imgers").imgers({
					width: '182', //这两个参数没用上
					height: '142',
					autoplus: true
				});
			})
		</script>

	</head>

	<body>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imgers imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>

	</body>

</html>

imgers.js

;
(function($) {
	$.fn.imgers = function(options) {
		var local_val = {
			width: '100', //长
			height: '100', //宽
			autoplus: false //自动增加
		};

		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) {
				url = window.createObjectURL(file)
			} else if (window.URL != undefined) {
				url = window.URL.createObjectURL(file)
			} else if (window.webkitURL != undefined) {
				url = window.webkitURL.createObjectURL(file)
			}
			return url
		};
		var strs = '<div class="imgers imger">' +
			'<input type="file" />' +
			'<img src="img/btn.png" />' +
			'<span class="closer">X</span>' +
			'</div>';
		var obj = $.extend({}, local_val, options);
		console.log(obj);
		$("div.imger").on('click', 'span.closer', function() {
			$("div.imger input[type='file']").val('');
			$(this).hide().prev('img').attr('src', 'img/btn.png');
		});
		$("body").on('click', 'div.imgers span.closer', function() {
			if ($("div.imgers").length > 1) {
				$(this).parent('div.imgers').remove();
			} else {
				$("div.imgers input[type='file']").val('');
				$(this).hide().prev('img').attr('src', 'img/btn.png');
			}
		});

		if (obj.autoplus) {
			$("body").on('change', 'div.imgers input', function() {
				var srcs = getObjectURL(this.files[0]);
				alert(srcs);
				/**************************/
				console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
				/*************************/
				$(this).next('img').attr('src', srcs).next('span.closer').show();
				$(this).parent('div').after(strs);
			})
		} else {
			$("body").on('change', 'div.imger input', function() {
				var srcs = getObjectURL(this.files[0]);
				alert(srcs);
				/**************************/
				console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
				var tuozhanming = (this.files[0].name).split('.');
				console.log("文件拓展名:" + tuozhanming[1]);
				/*************************/
				$(this).next('img').attr('src', srcs).next('span.closer').show();
			})
		}

	}
	return this
})(jQuery);

最骚的就是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input file上传图片预览(查看图片大小，类型，名字)------------------------------自己动手写jQuery插件

最简单的实现方法： div.imger { width: 182px; height: 142px; border: 1px solid green; position: relative; } div.imger input { position: absolute; opacity: 0;
复制链接

扫一扫

专栏目录