LOGO 首页 OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 技术文档 其他文档  
 
网站管理员

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

admin
2023年11月28日 23:10 本文热度 5043
最近需要在客户端操作文件,看到网上有 FileReader 对象,链接:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

还是直接上代码吧,大家自己看:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function upload(input) {  

            //支持chrome IE10  

            if (window.FileReader) {  

                var file = input.files[0];  

                filename = file.name.split(".")[0];  

                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文件)


该文章在 2023/11/28 23:10:40 编辑过

全部评论1

admin
2023年11月28日 23:14
FileReaderFileReader对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。 其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。 重要提示:FileReader 仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 Javascript 中按路径名读取文件,应使用标准 Ajax 解决方案进行服务器端文件读取,如果读取跨域,则使用 CORS 权限。备注:此特性在Web Worker中可用构造函数FileReader()返回一个新构造的FileReader。有关详细信息和示例,请参阅如何在 web 应用程序中使用文件。属性FileReader.error只读一个DOMException,表示在读取文件时发生的错误。FileReader.readyState只读表示FileReader状态的数字。取值如下:常量名值描述EMPTY0还没有加载任何数据。LOADING1数据正在被加载。DONE2已完成全部的读取请求。FileReader.result只读文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。事件处理FileReader.onabort处理abort事件。该事件在读取操作被中断时触发。FileReader.(en-US)处理error事件。该事件在读取操作发生错误时触发。FileReader.onload处理load事件。该事件在读取操作完成时触发。FileReader.onloadstart处理loadstart事件。该事件在读取操作开始时触发。FileReader.onloadend处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。FileReader.onprogress处理progress事件。该事件在读取Blob时触发。备注:因为FileReader继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。方法FileReader.abort()中止读取操作。在返回时,readyState属性为DONE。FileReader.readAsArrayBuffer()开始读取指定的Blob中的内容,一旦完成,result 属性中保存的将是被读取文件的ArrayBuffer数据对象。FileReader.readAsBinaryString()非标准开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data:URL 格式的 Base64 字符串以表示所读取文件的内容。FileReader.readAsText()开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。规范SpecificationFile API#APIASynch浏览器兼容性Report problems with this compatibility data on GitHubdesktopmobileserverChrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet WebView Android Deno FileReader 6Toggle history 12Toggle history 3.6 footnoteToggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.0Toggle historyFileReader()constructor 6Toggle history 12Toggle history 3.6Toggle history 12.1Toggle history 6Toggle history 18Toggle history 32Toggle history 12.1Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyabort 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyabortevent 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyerror 6Toggle history 12Toggle history 3.6 footnoteToggle history 11Toggle history 6 footnoteToggle history 18Toggle history 32 footnoteToggle history 11Toggle history 6 footnoteToggle history 1.0Toggle history 3Toggle history 1.3Toggle historyerrorevent 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyloadevent 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyloadendevent 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyloadstartevent 6Toggle history 12Toggle history 79 moreToggle history 11Toggle history 6Toggle history 18Toggle history 79 moreToggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyprogressevent 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyreadAsArrayBuffer 6Toggle history 12Toggle history 3.6Toggle history 12Toggle history 6Toggle history 18Toggle history 32Toggle history 12Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyreadAsBinaryStringDeprecated 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyreadAsDataURL 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32 footnoteToggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyreadAsText 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyreadyState 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyresult 6Toggle history 12Toggle history 3.6Toggle history 11Toggle history 6Toggle history 18Toggle history 32Toggle history 11Toggle history 6Toggle history 1.0Toggle history 3Toggle history 1.3Toggle historyAvailable in workers 6Toggle history 12Toggle history 46Toggle history 11Toggle history 6Toggle history 18Toggle history 46Toggle history 11Toggle history 6Toggle history 1.0Toggle history 37Toggle history 1.3Toggle historyLegendTip: you can click/tap on a cell for more information.Full supportFull support Partial supportPartial support Deprecated. Not for use in new websites. See implementation notes. Has more compatibility info.参见如何在 web 应用程序中使用文件FileBlobFileReaderSync 该评论在 2023/11/28 23:14:17 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2026 ClickSun All Rights Reserved  粤ICP备13012886号-2  粤公网安备44030602007207号