网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript使用readAsDataUrl方法预览图片

JavaScript使用readAsDataUrl方法预览图片

作者:liuhenghui5201  发布时间:2024-05-02 17:28:41 

标签: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>
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com