js图片实时预览

最新推荐文章于 2024-04-12 14:36:46 发布

qq_37996815

最新推荐文章于 2024-04-12 14:36:46 发布

阅读量498

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37996815/article/details/79901544

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

FileReader 获取图片的base64 代码并预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            width: 170px;
            height: 170px;
            border: 1px solid lightgray;
        }
        .img>img{
            width: 170px;
            height: 170px;
        }

    </style>
</head>
<body>
<input type="file" id="file">
<div class="img">
    <img src="" alt="" id="img">
</div>
<script>
    window.οnlοad=function () {
        /*请将input的id设为file  img标签的id设为img**/
         var file=document.getElementById('file');
         var img=document.getElementById('img');
         var dataImg;
         file.οnchange=function () {
         //判断是否支持FileReader
             if(typeof FileReader==="undefined"){
                     alert('您的浏览器不支持');
             }
             //读取文件
             var result=this.files[0];
             //获取文件类型
             var type=result.type;
             if(!type){
                 alert('请上传图片');
             }else {
                 //判断图片类型
                 type=type.split('/')[1];
                 console.log(type);
                 //使用正则匹配判断是否是jpeg,jpg,png,bmp,gif图片类型
                  if(type.match(/^(jpg|bmp|png|jpeg|gif)$/g)){
                     console.log(result);
                     //声明一个fileReader
                     var reader=new FileReader();
                     //以数据流的形式读取图片
                     reader.readAsDataURL(result);
                     //图片读取完毕后执行操作
                     reader.οnlοad=function (e) {
                         //获取图片读取结果
                          dataImg=this.result;
                         //加载图爿到标签上
                         img.setAttribute('src',dataImg);
                     };


                  }
                  else {
                      alert("请上传图片格式");
                      //清空input
                      this.value='';
                  }

             }

         }
    }
</script>
</body>
</html>

qq_37996815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片实时预览

FileReader 获取图片的base64 代码并预览&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫