前端图片预览功能实现，js预览功能实现，多文件预览功能实现，图片预览功能实现，图片预览功能，网页图片预览功能实现

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;
 }

标签：fr,预览,img,功能,preview,图片
来源： https://blog.csdn.net/qq_45262779/article/details/121800686