欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript使用readAsDataUrl方法预览图片

程序员文章站 2023-01-29 11:34:25
本文实例为大家分享了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>

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

上一篇： php图片水印添加，压缩，剪切的封装类实现

下一篇： JavaScript通过filereader接口读取文件

推荐阅读