JavaScript使用readAsDataUrl方法预览图片

本文实例为大家分享了readAsDataUrl方法预览图片的具体代码，供大家参考，具体内容如下

<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='"+e.target.result+"' alt=''/>"; 
        $$("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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# readAsDataUrl # 预览图片 # 使用JavaScript解析URL的方法示例 # javascript将url解析为json格式的两种方法 # JavaScript使用readAsDataURL读取图像文件 # JavaScript获取URL参数的方法之一 # 使用JavaScript获取URL中的参数(两种方法) # JavaScript重定向URL参数的两种方法小结 # JavaScript获取URL中参数querystring的方法详解 # JavaScrip如果基于url实现图片下载 # 您的 # 都要 # 不支持 # 大家分享 # 具体内容 # 大家多多 # Keywords # Description # body # Author # Generator # content # EditPlus # script # id # return # document # function # type # text

返回目录在线咨询

上一篇：郑州建站msgg：网站建设完成后，后续维护需要注意什么？
下一篇：Golang如何使用pprof分析性能瓶颈_Golang pprof性能分析与优化方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript使用readAsDataUrl方法预览图片

您的项目需求