实现图片上传预览功能代码,Js代码库,德仔网

代码语言
代码分类
【Js】实现图片上传预览功能
作者:耀阳 / 发布于2016/9/20/ 969
<!doctype html>
<html lang="en">
<head>
	<title>dsadsads</title>
	<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
	<style>
		*{margin:0;padding:0;list-style:none}
		.clearfix:after{content:"";display:block;clear:both;}
		.clearfix{zoom:1;}
		.container{
			width: 1100px;
			margin:0 auto;
		}
		.item{
			background:#ccc;
		}
		.item li{
			font-size:20px;
			line-height: 50px;
			float:left;
			margin:5px 90px;
			padding:5px 20px;
			border:1px solid #fff;
		}
		#warp div{
			display:none;
		}
		.warp li{
			width: 100px;
			height: 100px;
			float:left;
			border:1px dotted #000;
			margin:50px;
			position:relative;
			display:none;
		}
		.warp li b{
			width: 100px;
			height: 100px;
			position: absolute;
			z-index:-1;
			font-size:50px;
			line-height:100px;
			text-align:center;
		}
		.warp  li input{
			width: 100px;
			height: 100px;
			opacity:0
		}
		.warp  li strong{
			position:absolute;
			right:2px;
			top:2px;
			background:#ccc;
			padding:5px;
			cursor:pointer;
			display:none;
			z-index:66;
		}
		.warp  li img{display:none}
	</style>
</head>

<body>
<div class="container">


<ul class="item clearfix" id="item">
	<li>卫生间</li>
	<li>厨房</li>
	<li>阳台</li>
	<li>窗台</li>
</ul>
<div id="warp">
<div style="display:block">
	<h3>
		<span>请上传卫生间图片细节说明</span>
		<hr>
	</h3>
	<ul class="warp clearfix" >

		<li style="display:block">
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_0" />
			<img id="imgShow_WU_FILE_0" width="100" height="100" />
			<span></span>
		</li>

		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_1" />
			<img id="imgShow_WU_FILE_1" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_2" />
			<img id="imgShow_WU_FILE_2" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_3" />
			<img id="imgShow_WU_FILE_3" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_4" />
			<img id="imgShow_WU_FILE_4" width="100" height="100" />
			<span></span>
		</li>

	</ul style>
</div>
<div>
	<h3>
		<span>请上传厨房图片细节说明</span>
		<hr>
	</h3>
	<ul class="warp clearfix">
		<li style="display:block">
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_5" />
			<img id="imgShow_WU_FILE_5" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_6" />
			<img id="imgShow_WU_FILE_6" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_7" />
			<img id="imgShow_WU_FILE_7" width="100" height="100" />
			<span></span>
		</li>
	</ul>
</div>
<div>
	<h3>
		<span>请上传阳台图片细节说明</span>
		<hr>
	</h3>
	<ul class="warp clearfix">
		<li style="display:block">
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_8" />
			<img id="imgShow_WU_FILE_8" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_9" />
			<img id="imgShow_WU_FILE_9" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_10" />
			<img id="imgShow_WU_FILE_10" width="100" height="100" />
			<span></span>
		</li>
	</ul>
</div>
<div>
	<h3>
		<span>请上传窗台图片细节说明</span>
		<hr>
	</h3>
	<ul class="warp clearfix">
		<li style="display:block">
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_11" />
			<img id="imgShow_WU_FILE_11" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_12" />
			<img id="imgShow_WU_FILE_12" width="100" height="100" />
			<span></span>
		</li>
		<li>
			<b>+</b>
			<strong>X</strong>
			<input type="file" id="up_img_WU_FILE_13" />
			<img id="imgShow_WU_FILE_13" width="100" height="100" />
			<span></span>
		</li>
	</ul>
</div>

</div>
</div>
</body>
</html>
<script>
	var uploadPreview = function(setting) {
		var _self = this;
		_self.IsNull = function(value) {
			if (typeof (value) == "function") { return false; }
			if (value == undefined || value == null || value == "" || value.length == 0) {
				return true;
			}
			return false;
		}

		_self.DefautlSetting = {
			UpBtn: "",
			DivShow: "",
			ImgShow: "",
			Width: 100,
			Height: 100,
			ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
			ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
			callback: function() { }
		};

		_self.Setting = {
			UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
			DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
			ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
			Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
			Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
			ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
			ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
			callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
		};

		_self.getObjectURL = function(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;
		}

		_self.Bind = function() {

			document.getElementById(_self.Setting.UpBtn).onchange = function() {
				if (this.value) {
					if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
						alert(_self.Setting.ErrMsg);
						this.value = "";
						return false;
					}
					if (navigator.userAgent.indexOf("MSIE") > -1) {
						try {
							document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
						} catch (e) {
							var div = document.getElementById(_self.Setting.DivShow);
							this.select();
							top.parent.document.body.focus();
							var src = document.selection.createRange().text;
							document.selection.empty();
							document.getElementById(_self.Setting.ImgShow).style.display = "none";
							div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
							div.style.width = _self.Setting.Width + "px";
							div.style.height = _self.Setting.Height + "px";
							div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
						}
					} else {
						document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
					}
					_self.Setting.callback();
				}

			}
		}

		_self.Bind();
	}
	function file_click(){
		var WARP = document.getElementById('warp');
		var WARP_LI = WARP.getElementsByTagName('li');
		for(var i=0; i<WARP_LI.length;i++){
			new uploadPreview({ UpBtn: "up_img_WU_FILE_"+i, ImgShow: "imgShow_WU_FILE_"+i});
		}
	}
	window.onload = file_click;
</script>
<script>
	$(function(){
		var n=1;
		$('input').on('change',function(){
			$(this).parent().find('strong').show();
			$(this).hide().siblings('img').show();
			$(this).parent().find('span').html($(this).val().substring($(this).val().lastIndexOf('\\')+1));
			$(this).parent().next().show();
			if($(this).parent().parent().children().size()==n){
				return false;
			}else{
				$(this).parent().next().show();
				n++;
			}
		});
		$('#warp li strong').on('click',function(){
                        $(this).siblings('input').val('');
			$(this).siblings('img').hide();
			$(this).hide();
			$(this).siblings('input').show();
			$(this).parent().find('span').html('');
		});
		$('#item li').on('click',function(){
			$('#warp').children().eq($(this).index()).toggle();
		})
	})
</script>
试试其它关键字
同语言下
可能有用的
耀阳贡献的其它代码(13)