最近需要在客户端操作文件,看到网上有 FileReader 对象,链接:https://developer.mozilla.org/zh-CN/docs/Web/API/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 读取本地文本文件(可兼容各种浏览器)的更多相关文章

  1. 使用JS读取本地文本文件(兼容各种浏览器)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. FileReader读取本地文件

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

  3. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  5. 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. js实现多物体运动框架并兼容各浏览器

    首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...

  7. js实现复制到剪贴板功能,兼容所有浏览器

    http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...

  8. js鼠标滑轮滚动事件绑定(兼容主流浏览器)

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

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

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

随机推荐

  1. 用poolmon来查找内存泄露

    用poolmon来查找内存泄露 poolmon C:\WinDDK\7600.16385.1\tools\Other\i386\poolmon.exegflags     C:\WinDDK\7600 ...

  2. JavaScript开发小技巧

    总结一些能够提高开发效率的JS技巧 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重 ...

  3. 利用ApplicationListener和ContextRefreshedEvent加载自己的beanPool

    基本原理: 1.Spring的ApplicationListener和ContextRefreshedEvent一般都是成对出现的. 2.在IOC的容器的启动过程中,当所有的bean都已经处理完成之后 ...

  4. 《Linux就该这么学》培训笔记_ch13_使用Bind提供域名解析服务

    <Linux就该这么学>培训笔记_ch13_使用Bind提供域名解析服务 文章最后会post上书本的笔记照片. 文章主要内容: DNS域名解析服务 安装并部署Bind服务程序 部署从服务器 ...

  5. [转帖]分布式锁-redLock And Redisson

    分布式锁-redLock And Redisson 2019-03-01 16:51:48 淹不死的水 阅读数 372更多 分类专栏: 分布式锁   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  6. python的JSON库

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. 1.json库的使用 使用 JSON 函数需要导入 json 库:import jso ...

  7. SQL系列(二)—— 查询(select)

    在开始之前先了解下SQL中的操作分类.根据与数据库不同操作的交互,对数据不同的处理类型,可以将SQL分为四种:插入.删除.修改.查询.本篇文章中主要介绍查询操作.其实查询操作也是日常应用使用最为频繁且 ...

  8. 使用php函数防止SQL注入方法

    什么是SQL注入? SQL注入是指在你系统防御之外,某人将一段Mysql语句注入到你的数据库.注入通常发生在系统要求用户输入数据的时候,比如用户名的输入,用户可能输入的不是一个用户名,而是一段SQL语 ...

  9. .net core 引入SwaggerUI教程

    Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.方便前后端接口对接. 1.打开NuGet程序包,搜索“Swashbuckle ...

  10. dubbo循序渐进 - 使用Docker安装Nexus

    docker search nexus docker pull docker.io/sonatype/nexus3 mkdir -p /usr/local/nexus3/nexus-data /usr ...