最常用的两种上传图片预览方式

最新推荐文章于 2024-05-16 11:32:42 发布

闲鱼本鱼

最新推荐文章于 2024-05-16 11:32:42 发布

阅读量911

点赞数 2

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_51369065/article/details/120776661

版权

方法1是浏览器为选择的图片设置一个虚拟路径，再将这个虚拟路径赋值给img标签的src

方法2是将选中的图片转换为base64位的编码，再将这个编码赋值给img标签的src。这个编码是独一无二的，可以在任何浏览器中通过地址访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="FileServlet" method="post" enctype="multipart/form-data">
        <input type="file" name="f" id="img" accept="image/*">
        <button>上传</button>
    </form>
    <img id="preview_img">
</body>
<script>
    // 方法1：
    // 给input添加内容改变事件
    document.querySelector("#img").addEventListener("change",function (evt) {
        // this.files[0]：获取当前图片的js对象
        // 2、URL.createObjectURL(this.files[0])：为当前图片对象设置一个虚拟路径
        var img_src = URL.createObjectURL(this.files[0]);
       // 设置图片标签的src为这个选择的图片的虚拟路径   这样就可以完成图片预览的功能了
        document.getElementById("preview_img").src = img_src;
    })

    // 方法2
    document.querySelector("#img").addEventListener("change",function (ev) {
        // 创建文件流
        var fileReader = new FileReader();
        fileReader.readAsDataURL(this.files[0]);
        fileReader.onload = function (ev1) {
            // ev1.target.result：当前图片对象的base64位编码
            document.getElementById("preview_img").src = ev1.target.result;
        }

    })

</script>
</html>

闲鱼本鱼

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
最常用的两种上传图片预览方式

方法1是浏览器为选择的图片设置一个虚拟路径，再将这个虚拟路径赋值给img标签的src方法2是将选中的图片转换为base64位的编码，再将这个编码赋值给img标签的src。这个编码是独一无二的，可以在任何浏览器中通过地址访问<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&g.
复制链接

扫一扫