HTML5 - 用<input>读取文本文件内容（以及文件名、大小、类型）
作者：hangge | 2016-03-01 08:30
使用 type 属性为 file 的 <input> 元素，就能得到一个标准的上传文件框。除了能在<form>元素中将文件发送给Web服务器外，这个<input>也有自己处理文件的方式。
1，选择文件后，我们可以获取其中的文件对象属性
每个文件对象都有三个有用的属性：
name：保存文件名（不包含路径）
size：文件的字节大小
type：保存文件的MIME类型
可以分别读取这三个属性，然后加入判断。比如拒绝处理超过一定大小的文件，或者只允许某种类型的文件。
2，创建FileReader对象，处理文件
通过调用 FileReader 的方法可以提取文件内容。其提供的方法有：
readAsText()：把文件内容转换成一个长字符串，这个方法只能处理包含文本内容（而不是二进制内容）的文件。（像txt、html、xml、csv等格式文件都可以）
readAsBinaryString()：让应用处理二进制编码的数据，但基本上就是把数据保存到一个文本字符串中，效率不高。
readAsArrayBuffer()：将数据读到一个数组中，每个数组项代表一个字节。其优势是可以用来创建Blob对象，然后切分成更小的二进制数据块，以便逐块处理。
readAsDataURL()：能让我们方便地取得图片数据。
3，读取文件数据以及相关属性样例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Read Text</title>
<style>
div {
margin-top: 30px;
border: solid 1px black;
padding: 5px;
}
</style>
<script>
function processFiles(files) {
var file = files[0];
var message = document.getElementById("message");
message.innerHTML = "文件名：" + file.name + "<br>";
message.innerHTML += "文件大小：" + file.size + "字节<br>";
message.innerHTML += "文件类型：" + file.type + "<br>";
var reader = new FileReader();
reader.onload = function (e) {
// 这个事件发生，意为着数据准备好了
// 把它复制到页面的<div>元素中
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
};
reader.readAsText(file);
}
</script>
</head>
<body>
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
<div id="message"></div>
<div id="fileOutput"></div>
</body>
</html>
全部评论（0）