suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert eine Bildvorschaufunktion in Echtzeit

JavaScript implementiert eine Bildvorschaufunktion in Echtzeit

零到壹度
零到壹度Original
2018-04-12 15:46:183582Durchsuche

Der Inhalt dieses Artikels besteht darin, die Echtzeit-Bildvorschaufunktion mithilfe von JavaScript mitzuteilen. Sie hat einen gewissen Referenzwert >FileReader zum Abrufen von Base64-Code und Vorschau

Verwandte Empfehlungen: 

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

Vorderseite -end-Implementierung der Echtzeitvorschau beim Hochladen von Bildern Zwei Möglichkeiten zum Hochladen von Bildern


Echtzeitvorschau von Bildern hochladen

js: Implementierung Sofortige Vorschau der hochgeladenen Bilder

Das obige ist der detaillierte Inhalt vonJavaScript implementiert eine Bildvorschaufunktion in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Escape-Anführungszeichen in JS und HTMLNächster Artikel：Zusammenfassung der Escape-Anführungszeichen in JS und HTML

In Verbindung stehende Artikel

Mehr sehen