标签：jquery box border 100px var docObj 上传 imgObjPreview 图片

<style>
	.imageDiv {
		display:inline-block;
		width:100px;
		height:100px;
		-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:100px;
		height:100px;
		background-color:rgba(0,0,0,.3);
		display:none;
		line-height:125px;
		text-align:center;
		cursor:pointer;
	}
	.cover .delbtn {
		color:red;
		font-size:10px;
	}
	.imageDiv:hover .cover {
		display:block;
	}
	.addImages {
		display:inline-block;
		width:100px;
		height:100px;
		-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:10px;
		text-align:center;
	}
	.text-detail span {
		font-size:40px;
	}
	.file {
		position:absolute;
		top:0;
		left:0;
		width:100px;
		height:100px;
		opacity:0;
	}
</style>

<div style="width: 70%;margin: 0 auto">
	<div id="Pic_pass">
		<p style="font-weight: bold;">请上传图片</p>
		<p><span style="color: red">注：每张图片大小不可超过4M，一次最多可以上传4张,多张上传时必须按住ctrl选中</span></p>
		<div class="picDiv">
			<div class="addImages">

				<input type="file" class="file" name="file[]" id="fileInput" multiple="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>
</div>




<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 = '100px';
				imgObjPreview.style.height = '100px';
				//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>
    

删除图片：

标签：jquery,box,border,100px,var,docObj,上传,imgObjPreview,图片
来源： https://blog.csdn.net/qq_43209524/article/details/123072122

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。