前端实现选择图片并预览

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

*上传照片:+添加人像面+添加国徽面

因为要选择文件，所以我使用了两个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，这样我们就实现了一个简单的预览图片的功能。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！