js uses readAsDataUrl to preview image example code-JS Tutorial-php.cn

js uses readAsDataUrl to preview image example code

零下一度

Release： 2017-05-12 09:47:38

Original

1708 people have browsed it

This article mainly introduces you in detailJavaScriptUsing the readAsDataUrl method to previewPictures, which has certain reference value. Interested friends can refer to it

The example of this article shares the specific code of the readAsDataUrl method preview image for your reference. The specific content is as follows

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

Copy after login

[Related recommendations]

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of js uses readAsDataUrl to preview image example code. For more information, please follow other related articles on the PHP Chinese website!