请写一个完整的demo出来
时间: 2024-10-04 21:02:07 浏览: 16
当然,下面是一个简单的JavaScript函数,它演示了如何使用HTML5的File API从用户选择的文件中读取内容并显示在控制台上:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>File Read Demo</title>
</head>
<body>
<!-- 选择文件按钮 -->
<input type="file" id="select-file" accept=".txt" onchange="handleFileSelect(this.files)">
<button onclick="readFile()">读取文件内容</button>
<pre id="output"></pre>
<script>
function handleFileSelect(files) {
if (!files.length) return;
var file = files[0]; // 取得第一个选择的文件
readFile(file);
}
function readFile(file) {
var reader = new FileReader(); // 创建FileReader对象
reader.onload = function(e) {
document.getElementById('output').innerText = '文件内容:\n' + e.target.result; // 显示文件内容
};
reader.onerror = function() {
console.error('无法读取文件');
};
reader.readAsText(file); // 开始读取文件内容,asText用于文本文件
}
</script>
</body>
</html>
```
在这个例子中,用户可以选择一个`.txt`类型的文件,然后点击“读取文件内容”按钮,浏览器会调用`readFile`函数并尝试读取文件内容。如果成功,结果会在页面底部的`<pre>`标签中显示;如果出错,会在控制台打印错误信息。
阅读全文