本文介绍了如何使用JavaScript的FileReader接口读取文件，包括readAsText、readAsDataURL等方法，以及在点名场景中的应用示例。通过H5的FileReader，可以实现文件的预览和处理，确保文件格式正确后再上传。同时，文章提到了文件读取的异步特性及相关的事件处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点名</title>
</head>
<script type="text/javascript">
var arr = new Array();
var temp_str ="0";
var i = 0;
function showPreview(source){
var input = source;
var reader = new FileReader();
reader.readAsText(input.files[0]);
reader.onload = function() {
if(reader.result) {
//显示文件内容
temp_str = reader.result;
}
};
}
function getDname()
{
if(temp_str=="0")
{
alert("请先上传文件");
}
else
{
var temp = Math.random()*arr.length;
arr = temp_str.split(" ");
document.getElementById("text").value=arr[Math.floor(temp)];
}
}
</script>
<body>
<div id="div" align="center" style="width: 300px;height: 300px; background-color: #FDEF85; margin: auto;">
<br>
<input type="file" name="file" value="上传文件" onchange="showPreview(this)" />
<br>
<br>
<br>
<br>
<input type="text" id="text" disabled="false">
<br>
<br>
<input type="button" value="开始点名" onclick="getDname()">
</div>
</body>
</html>
使用JS 读取文件
H5处于安全考虑不建议是使用JS上传文件，一般使用JS进行文件预览以确定格式是否正确再上传到服务器。
H5提供了FileReader()方法，以供对文件进行操作，但都是异步请求要注意
var reader = new FileReader();
| 函数 | 解释 |
|---|---|
| readAsArrayBuffer(file) | 按字节读取文件内容，结果用ArrayBuffer对象表示 |
| readAsBinaryString(file) | 按字节读取文件内容，结果为文件的二进制串 |
| readAsDataURL(file) | 读取文件内容，结果用data:url的字符串形式表示 |
| readAsText(file,encoding) | 按字符读取文件内容，结果用字符串形式表示 |
| abort() | 终止文件读取操作 |
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]);//发起异步请求
reader.onload = function(){
//读取完成后，数据保存在对象的result属性中
console.log(this.result)
}
同时还提供了文件读取的不同状态的方法
| 函数 | 解释 |
|---|---|
| onabort | 当读取操作被中止时调用 |
| onerror | 当读取操作发生错误时调用 |
| onload | 当读取操作成功完成时调用 |
| onloadend | 当读取操作完成时调用，无论成功或失败 |
| onloadstart | 当读取操作开始时调用 |
| onprogress | 在读取数据过程中周期性调用 |
在html中提供的了file的type来选择本地文件
<input type="file" name="file" value="上传文件" onchange="showPreview(this)" />
传递参数使用this就可以传递文件
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
