简单的使用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 = 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就可以传递文件

简单的使用JS读取本地的文件相关推荐

Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
JS读取本地CSV文件数据
JS读取本地CSV文件数据文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse 1. 依赖安装 yarn add papaparse papaparse的基本使用可 ...
html 读取本地xml文件,JS读取本地的XML文件
要想让JS读取本地的XML代码,得具备这样的条件,一般情况下,需要一个JS文件,一个XML文件,最后这两个文件就放在相同的路径下,这样方便调用. 一.XML文件代码示例大众计算机学习网 www.dz ...
JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
JS 变量保存为本地json文件，读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
使用Epub.js打开本地Epub文件
使用Epub.js打开本地Epub文件 1. 导入epubjs:下载地址:https://github.com/futurepress/epub.js/ 2. 辅助工具jszip:是一个用于创建.读取 ...
html 查看excel表格,html展示excel表格数据-html读取本地excel文件并展示
怎么用html实现excel表格首先html不能读取本地excel文件其次就算是javascript 也是不允许的这是为了安全考虑如果前端脚本可以读取本地文件那很不安全如何将excel上的 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
android mp3 lrc歌词文件utf-8歌词显示为乱码,Android读取本地json文件的方法(解决显示乱码问题)...
本文实例讲述了Android读取本地json文件的方法.分享给大家供大家参考,具体如下: 1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson ...

简单的使用JS读取本地的文件

使用JS 读取文件

在html中提供的了file的type来选择本地文件

简单的使用JS读取本地的文件相关推荐

最新文章

热门文章