JavaScript通过filereader接口读取文件

2024-05-06 16:37:04

字体：大中小

来源：转载

供稿：网友

使用FileReader接口的readAsDataURL方法实现图片的预览。

源代码：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>通过filereader接口读取文件</title> <script type="text/javascript"> function readAsDataURL() {   if(typeof FileReader=='undifined') //判断浏览器是否支持filereader   {     result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";     return false;   }   var file=document.getElementById("imagefile").files[0];   if(!/image///w+/.test(file.type)) //判断获取的是否为图片文件   {     alert("请确保文件为图像文件");     return false;   }   var reader=new FileReader();   reader.readAsDataURL(file);   reader.onload=function(e)   {     var result=document.getElementById("result");     result.innerHTML='<img src="'+this.result+'"  }    } </script> </head>  <body> <p>   <label>请选择一个文件：</label>   <input type="file" id="imagefile" />   <input type="button" value="读取图像" onClick="readAsDataURL();" /> </p> <div name="result" id="result">   <!-- 这里用来显示图片结果--> </div> </body> </html>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JavaScript使用readAsDataUrl方法预览图片

下一篇：JavaScript使用readAsDataURL读取图像文件