使用JS的 FileReader 读取本地文本文件(可兼容各种浏览器)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function upload(input) {
//支持chrome IE10
if (window.FileReader) {
var file = input.files[];
filename = file.name.split(".")[];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsText(file);
}
//支持IE 7 8 9 10
else if (typeof window.ActiveXObject != 'undefined'){
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
}
//支持FF
else if (document.implementation && document.implementation.createDocument) {
var xmlDoc;
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
} else {
alert('error');
}
}
</script>
</head>
<body>
<input type="file" onchange="upload(this)" />
</body>
</html>

不仅可以读取文本文件,还可以读取JS文件,CSS,HTML等纯文本格式,下面是运行效果(读取了oracle的tnsnames.ora文件)

出处:https://www.cnblogs.com/yaotome/p/9002172.html
使用JS的 FileReader 读取本地文本文件(可兼容各种浏览器)的更多相关文章
- 使用JS读取本地文本文件(兼容各种浏览器)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FileReader读取本地文件
FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- js实现多物体运动框架并兼容各浏览器
首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...
- js实现复制到剪贴板功能,兼容所有浏览器
http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
- 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器
[自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文 http://blog.cs ...
随机推荐
- spring boot 从开发到部署(二)—重启服务
上篇中,我们开发并部署上线了一个 spring boot 项目.现在需要编写服务重启脚本,保证服务器重启后能够自动的运行我们的项目. /home/web/sprint-web/restart-happ ...
- SQLServer ---------- 安装SQLserver数据库
1.安装SQLserver 数据2008 的地址 https://jingyan.baidu.com/article/948f592434b407d80ef5f97d.html?qq-pf-to=pc ...
- git new
Quick setup — if you’ve done this kind of thing before Set up in Desktop or HTTPSSSH Get started by ...
- CSP2019-S游记
目录 CSP2019-S游记 Day -2(UPDATE:2019-11-14) Day -1(UPDATE:2019-11-15) Day 1(UPDATE:2019-11-16) Day 2(UP ...
- Java学习:数据库连接池技术
本节内容 数据库连接池 Spring JDBC : JDBC Template 数据库连接池 1.概念:其实就是一个容器(集合),存放数据库连接的容器 当系统初始化好后,容器中会申请一些连接对象,当用 ...
- 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[4]:在 CKB 上实现 WebAssembly
作者:Xuejie 原文链接:https://xuejie.space/2019_10_09_introduction_to_ckb_script_programming_wasm_on_ckb/ N ...
- jmeter(二十七)分布式压测注意事项
之前的博客:jemter(二十三):分布式测试简略的介绍了利用jmeter做分布式测试的方法,当时只是介绍了背景和原因,以及基本的配置操作,有同学说写得不够详细. 正好今年双十一,我司的全链路压测,也 ...
- WPF Dispatcher使用
微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢?Dispatcher的作用是用于管理线程工作项队列.主线程负责接收输入.处理事件.绘制屏幕等工作,这样一来,UI ...
- 使用HttpClient访问接口(Rest接口和普通接口)
这里总结一下使用HttpClient访问外部接口的用法.后期如果发现有什么缺陷会更改.欢迎读者指出此方法的不足之处. 首先,创建一个返回实体: public class HttpResult { // ...
- 2019-07-30 ThinkPHP文件上传
文件上传就是获取到待上传文件的临时路径,把它移动到服务器下的相应文件夹中. 文件上传,必须在表单中的form标签中写入:enctype="multipart/form-data" ...