Maison >interface Web >js tutoriel >JavaScript implémente la fonction de prévisualisation d'image en temps réel

JavaScript implémente la fonction de prévisualisation d'image en temps réel

零到壹度original: 2018-04-12 15:46:183582parcourir

Le contenu de cet article est de partager avec vous la fonction de prévisualisation d'image en temps réel à l'aide de JavaScript. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent se référer à

FileReader pour obtenir le code Base64 et l'aperçu

<!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>

Recommandations associées :

Avant. -fin de la mise en œuvre de l'aperçu en temps réel du téléchargement d'images Deux façons de télécharger des images

Télécharger un aperçu en temps réel des images

js : implémentation Aperçu instantané des photos téléchargées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des guillemets d'échappement en js et htmlArticle suivant：Résumé des guillemets d'échappement en js et html

Articles Liés

Voir plus