原生 js 实现上传图片展示缩略图的两种方式

方式1 reader.readAsDataURL()

方式2 window.url()

具体实现 

 <input type="file" onchange="chooseImg(event)">
 <div class="imgBox"></div>

function chooseImg(e) {
        // single upload
        let filesList = e.target.files[0]; 
        let imgBox = document.getElementsByClassName("imgBox")[0]
        let ulDom = document.createElement("ul");
        ulDom.setAttribute("class","imgUl")
        let img = document.createElement("img")
        // 方式1 
        let reader = new FileReader();
        reader.readAsDataURL(filesList);
        reader.onload = function(e){
           img.src = e.target.result; // base64 缩略图
        }
        ulDom.appendChild(img);  
        imgBox.appendChild(ulDom);
}

 

<input type="file" onchange="chooseImgTwo(event)">
<div class="imgBoxTwo"></div>

 

function chooseImgTwo(e) {
        let filesList = e.target.files[0];   
        let imgBoxTwo = document.getElementsByClassName("imgBoxTwo")[0];
        let ulDom = document.createElement("ul");
        ulDom.setAttribute("class","imgUl");
        let img = document.createElement("img");
        window.URL = window.URL || window.webkit.URL;
        img.src=  window.URL.createObjectURL(filesList);
        img.onload = function(e){
            window.URL.revokeObjectURL(filesList) 
        }
        ulDom.appendChild(img); 
        imgBoxTwo.appendChild(ulDom);
}

实现效果 

 

 everyday is sunny day alias