代码:

<input type="file" name="uploadfile" class="J-upload">

<script>
//上传后
var upLoaded = function(evt) {
var fileString = evt.target.result;
console.log(fileString); //文本内容
};
//change事件
var updateUploadFile = function(evt){
var $target = $(evt.target);
var path = $target.val();
var file = path.match(/[^\/\\]+$/gi)[0];
var filterType = 'txt';
var rx = new RegExp('\\.(' + (filterType ? filterType : '') + ')$', 'gi'); //过滤文件
if(file.match(rx) == null){
alert('请上传txt文件');
return;
} var files = evt.target.files; // FileList object
if (files[0]) {
var reader = new FileReader();
reader.readAsText(files[0]);
reader.onload = upLoaded;
}
}; $('.J-upload').bind('change', $.proxy(updateUploadFile, this)); </script>

参考:
W3C File API
通过 File API 使用 JavaScript 读取文件

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h22ikkc22hj

html 5 读取本地文件API的更多相关文章

  1. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  2. .NET 读取本地文件绑定到GridViewRow

    wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...

  3. 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  4. 手工创建tomcat应用,以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  5. 【转】flash air中读取本地文件的三种方法

    actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...

  6. python 读取本地文件批量插入mysql

    Uin_phone.txt 本地文件内容 有1000条,这里只是展示前几条,供参考 133584752 133584759 133584764 133584773 133584775 13358477 ...

  7. FileReader读取本地文件

    FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...

  8. spark读取本地文件

    /** * Read a text file from HDFS, a local file system (available on all nodes), or any * Hadoop-supp ...

  9. QML 读取本地文件内容

    QML 对本地文件的读写 QML 里似乎没有提供直接访问本地文件的模块,但是我们能够自己扩展 QML,给它加上访问本地文件的能力. Qt 官方文档对 QML 是这样介绍的: It defines an ...

随机推荐

  1. omnet++:官方文档翻译总结(三)

    翻译总结自:Turning it Into a Real Network - OMNeT++ Technical Articles 接官方文档翻译总结(二),本节主要是真实网络的搭建 Part 4 - ...

  2. Python:Scrap爬虫过程中遇到的各种错误

    1.KeyError: 'Spider not found: BDS' 原因:settings.py中缺少了几项与spider名字配置相关的项: BOT_NAME = 'BDS' SPIDER_MOD ...

  3. 微信小程序两点之间的距离

    1:申请key: https://lbs.qq.com/dev/console/application/mine 网址: https://note.youdao.com/ynoteshare/inde ...

  4. layui 数据表格的使用(分页+总条数)

    下载地址 https://www.layui.com/ 点击实例,找到layui适合模板 2. 新建html将代码复制到对应模板,修改对应样式路径. 5.修改对应参数(url,field) 追加以下参 ...

  5. VUE npm run build的项目出现跨域请求的问题npm run dev没有这个问题

    报错信息 Access to XMLHttpRequest at 'http://platformapi-test.lih-elearning.cn/api/v1/login' from origin ...

  6. 如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

    序: 最近因为疫情,居家办公,索性翻翻之前的项目案例,总结总结. 这次疫情,深圳停摆,群众也挺恐慌的,封闭前一天,超市被抢购一空,虽然官方媒体一再强调,材米油盐蔬菜肉类管够,但是任然挡不住群众们的抢购 ...

  7. *****又错一道,不知道为啥。。。 ybt【例5.19】字符串判等

    [题目描述] 判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等. [输入] 两行,每行包含一个字符串. [输出] 若两个字符串相等,输出YES,否则输出NO. 代码我觉得没啥问 ...

  8. 个人网站tqqj.top

    建站历程 就在这里记录自己的建站历程吧!:) 2022-3-21 今天写这个建站历程实际上是有点晚了,因为我已经把网站完全上线了,意思就是说网站已经在运行了. 这个网站是准备建立自己的博客使用的,但是 ...

  9. kdump原理,是如何找到入口的

    请解释下kdump原理,捕获内核是如何获取到生产内核的首地址的.

  10. xx局点FusionCloud6.3 type1 计算配额失败问题

    现象: 排查过程: 1.登录云平台部署面,选择部署资源-服务器 2.找到MOC-ManageOne-Service01.MOC-ManageOne-Service02两台机器ip地址. 3.用ssh工 ...