js+files对象简单的实现图片上传预览效果

最新推荐文章于 2022-12-10 14:18:05 发布

小海柯

最新推荐文章于 2022-12-10 14:18:05 发布

阅读量1.6k

点赞数

分类专栏：图片预览文章标签： js 图片上传图片预览 file readAsDataURL

本文链接：https://blog.csdn.net/u014403513/article/details/88412051

版权

图片预览专栏收录该内容

3 篇文章 0 订阅

订阅专栏

图片上传实现预览效果

js+files对象简单的实现图片上传预览效果

一步一步的优化，从简单的开始，加油！

利用去访问文件中的图片，并使用change事件来监听是否有文件上传
获取file对象
解析对象，转成base64对象的url

图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" id="imgObj" onchange="getImage()"/>
    <img src="" id="imgId"/>
    <script>
        getImage= function(){
             //1:获取file对象
            var upImage = document.getElementById('imgObj');
            var objImage = upImage.files[0];
            var reader = new FileReader();
             //2:解析对象，转成baae64对象的url
            reader.addEventListener("load", function () {
                var imgurl = reader.result;
                 var imgId = document.getElementById('imgId');
                 imgId.src=imgurl;
            }, false);

             if (objImage) {
                 //在load中返回一个base64编码
                reader.readAsDataURL(objImage);
            }
        };
    </script>
</body>
</html>

小海柯

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js+files对象简单的实现图片上传预览效果

图片上传实现预览效果js+files对象简单的实现图片上传预览效果一步一步的优化，从简单的开始，加油！利用去访问文件中的图片，并使用change事件来监听是否有文件上传获取file对象解析对象，转成base64对象的url图片: 代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta...
复制链接

扫一扫