原生JS实现上传图片预览效果

先看效果图 

一、直接展示上传的图片

CSS代码：

#previewImg {
    position: relative;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 1px dashed rgb(0, 0, 0, .5);
    text-align: center;
    cursor: pointer;
}
        
#previewImg:hover {
    border: 1px dashed rgb(0, 0, 0);
}

#previewImg p {
    width: 100%;
    margin: 0;
}
        
#fileInp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
        
#fileImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

HTML代码：

<div id="previewImg">
     <input type="file" id="fileInp">
     <img src="" alt="111" id="fileImg">
     <p>上传图片</p>
</div>

JS代码：

let inp = document.getElementById('fileInp');
let fileImg = document.getElementById('fileImg');
inp.onchange = function() {
    let inpObj = inp.files[0]; // 拿到上传文件的属性
    // inpObj.size 上传文件的大小（字节数）
    // inpObj.type 上传文件的类型   例如：image/png
    if (inpObj.type !== "image/png") {
        alert('上传的不是png/jpg类型的图片')
    } else if (inpObj.size / 1024 / 1024 > 2) {
        alert('上传的图片超过2MB')
    } else {
        let windowURL = window.URL || window.webkitURL;
        let img = document.getElementById('preview');
        if (inp && inpObj) {
            // createObjectURL(inpObj)  创建一个文件的临时地址
            let dataURL = windowURL.createObjectURL(inpObj);
            fileImg.setAttribute('src', dataURL);
            fileImg.style.opacity = 1
         }
    }
}

二、将图片转换成base64，再上传

CSS、HTML代码同上

JS代码

let inp = document.getElementById('fileInp');
let fileImg = document.getElementById('fileImg');
inp.onchange = function() {
    let inpObj = inp.files[0]; // 拿到上传文件的属性
    // inpObj.size 上传文件的大小（字节数）
    // inpObj.type 上传文件的类型   例如：image/png
    if (inpObj.type !== "image/png") {
        alert('上传的不是png/jpg类型的图片')
    } else if (inpObj.size / 1024 / 1024 > 2) {
        alert('上传的图片超过2MB')
    } else {
        let windowURL = window.URL || window.webkitURL;
        let img = document.getElementById('preview');
        if (inp && inpObj) {
            // createObjectURL(inpObj)  创建一个文件的临时地址
            let dataURL = windowURL.createObjectURL(inpObj);
            toBase64(dataURL);
         }
    }
}
function toBase64(imgSrc) {
    var canvas = document.createElement("canvas");
    canvas.width = 320;
    canvas.height = 320;
    let context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    let myImage = new Image();
    myImage.src = imgSrc; //背景图片  你自己本地的图片或者在线图片
    myImage.crossOrigin = 'Anonymous';
    let base64 = null;
    myImage.onload = () => {
        context.drawImage(myImage, 0, 0, 320, 320);
        base64 = canvas.toDataURL("image/png");

        // 等图片转换成base64之后 更新图片
        fileImg.setAttribute('src', base64);
        fileImg.style.opacity = 1
    }
}