HTML5学习之fileReader

来源：互联网发布：什么软件可以学数学编辑：程序博客网时间：2024/06/02 17:57
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script type="text/javascript">//校验浏览器是否支持fileReaderfunction init(){if(typeof FileReader == 'undefined'){//alert('浏览器不支持');document.getElementById("result").innerHTML = "浏览器不支持";document.getElementById("file").setAttribute('disabled','disabled')}}function readAsDataURL(){//检查是否是图像var file = document.getElementById("file").files[0];var type = file.type;if(!/image\/\w+/.test(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="" />';}}//将文件以二进制的形式读取到页面function readAsBinaryString(){var file = document.getElementById("file").files[0];var reader = new FileReader();reader.readAsBinaryString(file);reader.onload = function(e){var result = document.getElementById("result");result.innerHTML=this.result;}}//将文件以文本的形式读入到页面function readAsText(){var file = document.getElementById("file").files[0];var reader = new FileReader();reader.readAsText(file);reader.onload = function(e){var result = document.getElementById("result");result.innerHTML=this.result;}}</script></head><body onLoad="init()"><label>请选择一个文件</label><input type="file" id="file"/><input type="button" value="读取图像" onClick="readAsDataURL()" /><input type="button" value="读取二进制数据" onClick="readAsBinaryString()"/><input type="button" value="读取文本文件" onClick="readAsText()"/><div name="result" id="result"></div></body></html>
0 0