JavaScript通过filereader接口读取文件
2017-05-10 11:19
741 查看
使用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+'" alt=""/>' } } </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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- html5 javascript FileReader 读取文件并传回后台保存
- HTML5 ( 通过文件输入框读取文件为base64文件, 并借助canvas压缩 ) FileReader, files, drawImage
- 使用FileReader接口读取文件内容
- 利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件
- FileReader详解与实例---读取并显示图像文件 | JS Mix
- FileReader详解与实例---读取并显示图像文件
- FileReader、FileWriter 操作,从文件读取出来,在组合读入文件
- BufferedReader和FileReader读取txt文件乱码
- FileReader:读取本地图片文件并显示
- BufferedReader和FileReader读取txt文件乱码问题
- BufferedReader + FileReader读取文件并打印出来每一行(Java文件操作)
- 利用javascript使html的file不可手动输入文件路径,只可通过[浏览]按钮选择
- Win7中Javascript读取File框中文件路径变更为C:\Fakepath的解决方法
- <转>BufferedReader和FileReader读取txt文件乱码
- 使用FileReader和FileWriter读取写入文件内容
- FileReader详解与实例---读取并显示图像文件
- 使用FileReader和FileWriter读取写入文件内容
- FileReader读取文件编码丢失问题(乱码)
- 初学Java,IO之使用FileInputStream和FileReader读取文件(四十一)
- java filereader读取文件