js实现多图片预览功能
核心思路
图片预览的核心思路:将用户上传的图片通过FileReader对象读取为base64字符串,然后将读取到的字符串重新插入img标签的src属性中即可实现图片的预览。
效果展示
HTML
<input type="file" multiple />
<div class="preview-img-list">
</div>
CSS
.preview-img-list {
display: flex;
}
.preview-img-list img {
width: 200px;
height: 100px;
border: 1px solid #ddd;
margin-right: 5px;
}
JS
/*实现图片预览*/
function preview(file) {
return new Promise((resolve) => {
const fr = new FileReader();
//将文件读取为base64字符串
fr.readAsDataURL(file);
fr.onload = function() {
resolve(fr.result);
}
});
}
// 多文件上传功能实现
document.querySelector('input').onchange = async function() {
//获取文件域文件this.files
//1.获取到上传文件的base64字符串
let imgList = [];
for(let i = 0; i < this.files.length; i++) {
imgList.push(await preview(this.files[i]));
}
//2.渲染页面,实现预览功能
let str = '';
imgList.forEach(item => str += `<img src="${item}" alt="">`);
document.querySelector('.preview-img-list').innerHTML = str;
}