前端提交file图片后，将图片显示出来

最新推荐文章于 2023-06-19 11:39:00 发布

LiAlisa

最新推荐文章于 2023-06-19 11:39:00 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/qq_39516866/article/details/95603889

版权

本文介绍如何在前端实现用户选择文件后即时显示图片，适用于文件上传功能中提供预览效果。

摘要由CSDN通过智能技术生成

<script type="">
    $(document).ready(function () {
        var userLogo=document.getElementById("imgs");
        var modifyheadimg=document.getElementsByClassName("modifyheadimg");
        var photo=document.getElementById("photo");
        photo.addEventListener("change",function () {
            var file=this.files[0];
            //方法1
            var $imgfile=$(this);
            var imgobj=$imgfile[0];
            var windowURL=window.url || window.webkitURL;
            var dataimgurl=windowURL.createObjectURL(imgobj.files[0]);
            $("#imgs").attr("src",dataimgurl);
            //方法2
            // if(file.type.indexOf("image")==0){
            //     var reader=new FileReader();
            //     reader.readAsDataURL(file);
            //     reader.οnlοad=function (ev) {
            //         var newUrl=this.result;
            //