提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery多图片上传预览demo效果示例（整理）

jQuery上传 图片 示例 效果 整理 Demo 预览
2023-09-14 09:13:42 时间 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery多图片上传预览</title>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
			.imageDiv {
				display: inline-block;
				width: 160px;
				height: 130px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				border: 1px dashed darkgray;
				background: #f8f8f8;
				position: relative;
				overflow: hidden;
				margin: 10px
			}

			.cover {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 160px;
				height: 130px;
				background-color: rgba(0, 0, 0, .3);
				display: none;
				line-height: 125px;
				text-align: center;
				cursor: pointer;
			}

			.cover .delbtn {
				color: red;
				font-size: 20px;
			}

			.imageDiv:hover .cover {
				display: block;
			}

			.addImages {
				display: inline-block;
				width: 160px;
				height: 130px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				border: 1px dashed darkgray;
				background: #f8f8f8;
				position: relative;
				overflow: hidden;
				margin: 10px;
			}

			.text-detail {
				margin-top: 40px;
				text-align: center;
			}

			.text-detail span {
				font-size: 40px;
			}

			.file {
				position: absolute;
				top: 0;
				left: 0;
				width: 160px;
				height: 130px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart="">
			   
			<!--点击预览图片-->
			    <div id="Pic_pass">
				        <p><span style="color: red">注：每张照片大写不可超过4M，且最多可以传十张</span></p>
				        <div class="picDiv">
					            <div class="addImages">
						               
						<!--multiple属性可选择多个图片上传-->
						                <input type="file" class="file" id="fileInput" multiple=""
							accept="image/png, image/jpeg, image/gif, image/jpg">
						                <div class="text-detail">
							                    <span>+</span>
							                    <p>点击上传</p>
							                </div>
						           
					</div>
					        </div>
				    </div>
			    <div class="msg" style="display: none;"></div>
		</form>


		<script>
			//图片上传预览功能
			var userAgent = navigator.userAgent; //用于判断浏览器类型

			$(".file").change(function() {
				//获取选择图片的对象
				var docObj = $(this)[0];
				var picDiv = $(this).parents(".picDiv");
				//得到所有的图片文件
				var fileList = docObj.files;
				//循环遍历
				for (var i = 0; i < fileList.length; i++) {
					//动态添加html元素
					var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name +
						"' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
					console.log(picHtml);
					picDiv.prepend(picHtml);
					//获取图片imgi的对象
					var imgObjPreview = document.getElementById("img" + fileList[i].name);
					if (fileList && fileList[i]) {
						//图片属性
						imgObjPreview.style.display = 'block';
						imgObjPreview.style.width = '160px';
						imgObjPreview.style.height = '130px';
						//imgObjPreview.src = docObj.files[0].getAsDataURL();
						//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
						if (userAgent.indexOf('MSIE') == -1) {
							//IE以外浏览器
							imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
							console.log(imgObjPreview.src);
							// var msgHtml = '<input type="file" id="fileInput" multiple/>';
						} else {
							//IE浏览器
							if (docObj.value.indexOf(",") != -1) {
								var srcArr = docObj.value.split(",");
								imgObjPreview.src = srcArr[i];
							} else {
								imgObjPreview.src = docObj.value;
							}
						}
					}
				}

				/*删除功能*/
				$(".delbtn").click(function() {
					var _this = $(this);
					_this.parents(".imageDiv").remove();
				});
			});
		</script>

	</body>

</html>

相关文章