前端实现选择图片并预览

因为业务要求需要做一个上传身份证的功能，实现起来还是有一点麻烦的，所以记录一下。
首先，我把功能先简单介绍一下。如图：
我要点击图中的两个方块，来实现选择图片并预览的功能。
html部分代码如下：

<form method="post" action="#" enctype="multipart/form-data">
			<span class="must">*</span>上传照片:
			<div class="userImg1" onclick="uploadFile('userImg1')">+添加人像面</div>
			<div class="userImg2" onclick="uploadFile('userImg2')">+添加国徽面</div>
			<input type="file" name="uploadImg1" style="display: none" class="fileBtn" accept="image/*" onchange="fileBtn(this)">
			<input type="file" name="uploadImg2" style="display: none" class="fileBtn" accept="image/*" onchange="fileBtn(this)">
			<input type="submit" value="提交" class="sub-btn">
		</form>

因为要选择文件，所以我使用了两个type="file"类型的input标签，并设置其隐藏。

css部分代码如下：

.must{
	color:red;
	font-size:14px;
}
.userImg1,.userImg2{
	width:240px;
	height:135px;
	display: inline-block;
	background-color: #f3f5f4;
	text-align: center;
	line-height: 135px;
	vertical-align: top;
	margin-top:13px;
	margin-left:8px;
	cursor:pointer;
}
.userImg1{
	background-size: 240px 135px;
}
.userImg2{
	background-size: 240px 135px;
}
.sub-btn{
	width: 92px;
	height:35px;
	background-color: #e1251a;
	display: block;
	margin:25px 0 0 94px;
	border:none;
	outline: none;
	color:#fff;
	cursor:pointer;
}

因为html和css部分代码很简单，所以不再主要介绍，将重点放在js代码部分。

首先，我们点击两个div盒子来上传图片时，要触发的点击事件，因为有两个，所以我引入flag变量来做一个标记

var btn = document.getElementsByClassName('sub-btn')[0];
var userImg1 = document.getElementsByClassName('userImg1')[0];
var userImg2 = document.getElementsByClassName('userImg2')[0];
var fileBtn1 = document.getElementsByClassName('fileBtn')[0];
var fileBtn2 = document.getElementsByClassName('fileBtn')[1];
var flag = 0;
function uploadFile(e){
	if(e=="userImg1"){
		fileBtn1.click();
		flag = 1;
	}else{
		fileBtn2.click();
		flag = 2;
	}
}

这段代码实现的功能主要就是，在点击盒子之后，触发input的点击事件，并设置标记。
然后，界面上会弹出选择框，我们需要选择图片，选择完毕后，要在界面上预览图片，必然要获取图片的URL。

首先，我们来了解一下window.URL.createObjectURL这个函数，这个函数会根据传入的参数创建一个指向该参数对象的URL。

function fileBtn(e){
	const fileObj = e.files[0];
	alert(e.files[1]);
	const windowURL = window.URL || window.webkitURL;
	if(fileBtn && fileObj){
		const imgURL = windowURL.createObjectURL(fileObj);
		if(flag==1){
			userImg1.style.backgroundImage = "url("+imgURL+")";
		}else{
			userImg2.style.backgroundImage = "url("+imgURL+")";
		}
	}
}

ok，这样我们就实现了一个简单的预览图片的功能。