欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript实现图片实时预览功能

程序员文章站 2022-04-23 23:35:21
...
本篇文章给大家分享的内容是JavaScript实现图片实时预览功能,有着一定的参考价值,有需要的朋友可以参考一下

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

JavaScript实现图片实时预览功能

<!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">
<p class="img">
    <img src="" alt="" id="img">
</p>
<script>
    window.onload=function () {
        /*请将input的id设为file  img标签的id设为img**/
         var file=document.getElementById('file');
         var img=document.getElementById('img');
         var dataImg;
         file.onchange=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.onload=function (e) {
                         //获取图片读取结果
                          dataImg=this.result;
                         //加载图爿到标签上
                         img.setAttribute('src',dataImg);
                     };


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

             }

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

相关推荐:

前端实现图片上传实时预览的两种方式

上传图片实时预览

js:实现上传图片即时预览

以上就是JavaScript实现图片实时预览功能的详细内容,更多请关注其它相关文章!