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

最新推荐文章于 2024-12-29 21:38:06 发布

LiAlisa

最新推荐文章于 2024-12-29 21:38:06 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39516866/article/details/95603889

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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.onload=function (ev) {
            //         var newUrl=this.result;
            //         $("#imgs").attr("src",newUrl);
            //     }
            // }
        })
    })
</script>

<div>

<img src="$!img" width="132" height="132" id="imgs"/>

<div style="height:34px;margin-top: 10px;">
    <span>上传文件：</span>
    <input type="file" id="photo" name="photo"  style="width: 200px;border-radius: 4px;height: 34px;"/>
</div>

</div>