简单的使用JS读取本地的文件
<!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 =
·
<!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就可以传递文件
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)