<input type='file' />选择图片不上传，在页面中显示的功能。

2020-05-07 320 阅读1分钟

在工作中有这样的需求，在页面中通过<input type='file />选择图片，不通过上传服务器，并在页面中显示出来的功能；（虽说这样做很变态，选择完图片上传到服务器，通过返回的图片地址去渲染图片才是正道，但是有些时候需求就是这样，没有办法~）闲话到此，贴出代码：

document.getElementById('selectImg').addEventListener('change',()=>{
        const file = document.getElementById('selectImg');
        const fileObj = file.files[0];
        const windowURL = window.URL || window.webkitURL;
        const img = document.getElementById('preview');

        if(file && fileObj) {
            const dataURl = windowURL.createObjectURL(fileObj);
            img.setAttribute('src',dataURl);
        }
    },false)

html代码：

    <input type="file" id="selectImg" />
    <img id="preview" />