首頁 >web前端 >js教程 >JavaScript實現圖片即時預覽功能

JavaScript實現圖片即時預覽功能

零到壹度原創: 2018-04-12 15:46:183582瀏覽

這篇文章給大家分享的內容是JavaScript實作圖片即時預覽功能，有著一定的參考價值，有需要的朋友可以參考一下

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">
<p class="img">
    <img src="" alt="" id="img">
</p>
<script>
    window.onload=function () {
        /*请将input的id设为file  img标签的id设为img**/
         var file=document.getElementById(&#39;file&#39;);
         var img=document.getElementById(&#39;img&#39;);
         var dataImg;
         file.onchange=function () {
         //判断是否支持FileReader
             if(typeof FileReader==="undefined"){
                     alert(&#39;您的浏览器不支持&#39;);
             }
             //读取文件
             var result=this.files[0];
             //获取文件类型
             var type=result.type;
             if(!type){
                 alert(&#39;请上传图片&#39;);
             }else {
                 //判断图片类型
                 type=type.split(&#39;/&#39;)[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(&#39;src&#39;,dataImg);
                     };


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

             }

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

JavaScript實現圖片即時預覽功能

FileReader 取得圖片的base64 程式碼並預覽

相關文章