js utilise readAsDataUrl pour prévisualiser l'exemple de code d'image-js tutoriel-php.cn

js utilise readAsDataUrl pour prévisualiser l'exemple de code d'image

零下一度

Libérer： 2017-05-12 09:47:38

original

1697 Les gens l'ont consulté

Cet article présente principalement en détail JavaScript utilisant la méthode readAsDataUrl pour prévisualiser les images, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple. dans cet article, partage le code spécifique de l'image d'aperçu de la méthode readAsDataUrl pour votre référence. Le contenu spécifique est le suivant

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

Copier après la connexion

[Recommandations associées]

1 Js gratuit en ligne. Tutoriel vidéo

2. Manuel de référence en chinois JavaScript

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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!