suchen

Heim  >  Artikel  >  Web-Frontend  >  js verwendet readAsDataUrl, um eine Vorschau des Bildbeispielcodes anzuzeigen

js verwendet readAsDataUrl, um eine Vorschau des Bildbeispielcodes anzuzeigen

零下一度
零下一度Original
2017-05-12 09:47:381701Durchsuche

Dieser Artikel stellt hauptsächlich JavaScript unter Verwendung der readAsDataUrl-Methode zur Vorschau von Bildern vor, die einen gewissen Referenzwert haben.

Das Beispiel In diesem Artikel wird der spezifische Code des Vorschaubilds der readAsDataUrl-Methode als Referenz bereitgestellt. Der spezifische Inhalt lautet wie folgt:

<html> 
 <head> 
 <title> New Document </title> 
 <meta name="Generator" content="EditPlus"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 </head> 
 
 <body> 
<script type="text/javascript"> 
  function $$(id){ 
    return document.getElementById(id); 
  } 
 
  function filePrevImg(files){ 
    //检测浏览器是否支持FileReader对象 
    if(typeof FileReader == "undefined"){ 
      alert("您的浏览器不支持FileReader对象！"); 
    } 
    var strHtml = ""; 
    for(var intI=0;intI<files.length;intI++){ 
      var tmpFile = files[intI]; 
      var reader = new FileReader();//每循环一次都要重新new一个FileReader实例 
      reader.readAsDataURL(tmpFile); 
      reader.onload=function(e){ 
        alert(e.target.result); 
        strHtml += "<img src=&#39;"+e.target.result+"&#39; alt=&#39;&#39;/>"; 
        $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>"; 
      }; 
    } 
  } 
</script> 
  </head> 
  <body> 
  <fieldset> 
    <legend>使用readAsDataUrl()方法预览图片</legend> 
    <input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" /> 
    <ul id="prevUpload"></ul>  
  </fieldset> 
 </body> 
</html>

[Verwandte Empfehlungen]

Kostenlose js online Video-Tutorial

2.

JavaScript-Referenzhandbuch für Chinesisch

3.

php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonjs verwendet readAsDataUrl, um eine Vorschau des Bildbeispielcodes anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：js-Beispielcode zum Lesen von Dateien über die Filereader-SchnittstelleNächster Artikel：js-Beispielcode zum Lesen von Dateien über die Filereader-Schnittstelle

In Verbindung stehende Artikel

Mehr sehen