HTML5中FileReader的使用

来源：互联网发布：2017剑灵捏脸数据天女编辑：程序博客网时间：2024/05/29 17:34
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>test</title>    <style>       </style>    <script>function readAsDataURL(){//检查是否为图像文件var file = document.getElementById('file').files[0];if(!/image\/\w+/.test(file.type)){alert("请确保文件为图像类型");return false;}var reader = new FileReader();//将文件以Data URL 形式读入页面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><p><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()"/></p><div name="result" id="result"></div>  </body></html>