javascript 阅览本地图片

215 阅读1分钟
<body>
    <div class="box">
        <input class="inp" type="file" multiple>
        <!-- multiple 可以选取多个文件 -->
    </div>
    <div class="imgList">
       
    </div>
</body>
</html>



<script>
    //获取元素
    let inp=document.getElementsByClassName("inp")[0];//input 获取本地图片
    let imgList=document.getElementsByClassName("imgList")[0];//放阅览图片的div

    //设置兼容  url
    getObjectURL=(file)=>{//
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    //创建 img 给img增加src属性并赋值  将img放到阅览图片div中
    let imgItem=document.createElement("img");//创建一个img
    inp.addEventListener("change",()=>{
        imgItem.setAttribute("src",getObjectURL(inp.files[0]));//给img添加src属性和属性值
    })
    imgList.appendChild(imgItem);//将img放到imgList中
    
    //多张图片 可以循环inp.files
</script>

前端小白,求大佬指点