JavaScript读取本地文件常用方法流程解析

出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

文件操作的流程

获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。

<input type="file">

如果想允选择多个文件,可以添加multiple属性:

<input type="file" multiple>

我们可以通过change事件来监听文件的选择,也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性,该属性是File对象的列表(可能有多个选择的文件)。

File对象如下所示:

读取文件

读取文件,主要使用的是[FileReader][1]类。

「该对象拥有的属性:」

「FileReader.error」:只读,一个DOMException,表示在读取文件时发生的错误 。

「FileReader.readyState」:只读 表示 FileReader 状态的数字。取值如下:

常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求

「FileReader.result」:只读,文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

「该对象拥有的方法:」

readAsText(file, encoding):以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file):读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file):读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file):读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

FileReader.abort():中止读取操作。在返回时,readyState属性为DONE。

「文件读取的过程是异步操作,在这个过程中提供了三个事件:progress、error、load事件。」

progress:每隔50ms左右,会触发一次progress事件。

error:在无法读取到文件信息的条件下触发。

load:在成功加载后就会触发。

在下面的示例中,我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一:读取文本文件

为了将文件内容显示为文本,change需要重写一下:

首先,我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件,我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的,以避免阻塞主线程和 UI 更新,这在读取大文件(如视频)时非常重要。

reader发出一个'load'事件(例如,类似于Image对象),告诉我们的文件已经读取完毕。

reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中,我们使用readAsText方法读取文件,因此result将是一个文本字符串。

例二:显示本地选择的图片

如果我们想要显示图像,将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法,可以将文件读入一个编码的字符串,该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同,区别是我们使用readAsDataURL读取文件并将结果显示为图像:

总结

1)由于安全和隐私的原因,JavaScript 不能直接访问本地文件。

2)可以通过 input 类型为 file 来选择文件,并对文件进行处理。

3) file input 具有带有所选文件的files属性。

4) 我们可以使用FileReader来访问所选文件的内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 在vue中读取本地Json文件的方法

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • js读取本地文件的实例

    如何用在浏览器端预览本地文件? 今天的主题是使用浏览器预览本地文件. 由于浏览器安全策略的限制,javascript程序不能自由地访问本地资源,这是对用户信息安全来说,是一项不得不遵守的准则.假如网络上的javascript程序可以自如地访问用户主机的本地资源,那么浏览器用户将毫无安全可言.尽管有这个安全限制,但是在得到用户允许的情况下,浏览器还是可以访问本地资源的. 获得用户允许的方法就是通过标签来让用户手动选择文件,这一过程就是用户授予访问权限的过程.然后 使用获得File 对象通过URL.

  • 通过Javascript读取本地Excel文件内容的代码示例

    读取本地Excel文件内容的Javascript代码: 复制代码 代码如下: <script type="text/javascript">function read_excel(){ var filePath="D:\abcd9.com.xls"; //要读取的xls    var sheet_id=2; //读取第2个表    var row_start=3; //从第3行开始读取    var tempStr='';    try{       

  • jQuery ajax读取本地json文件的实例

    json文件 { "first":[ {"name":"张三","sex":"男"}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅"

  • 解决JavaWeb读取本地json文件以及乱码的问题

    最近在开发项目的时候遇到一个问题,在myecilpes上使用googlede gson读取项目中的json文件成功,然后把项目发布到tomcat上再使用同样的方法,会提示"系统找不到指定的路径" 文件放在src/config/下 JsonParser parser = new JsonParser(); JsonObject object = (JsonObject) parser.parse(new FileReader("config/Test.json"));

  • php读取本地json文件的实例

    1.data.json文件 { "goods":[ { "type":1, "name":"wow精选", "product":[ { "id":98, "name":"真皮大衣", "title":"单桶原酿酒 威士忌 新春礼盒 限量独家", "titleDesc":"苏格兰麦

  • Java读取本地json文件及相应处理方法

    如下所示: //读取json文件地址 /* String path = getClass().getClassLoader().getResource("menu.json").toString(); path = path.replace("\\", "/"); if (path.contains(":")) { path = path.replace("file:/", ""); }

  • nodejs读取本地中文json文件出现乱码解决方法

    1. 确定json文件是UTF-8 无BOM编码的的.如果有BOM,会在读取第一行的时候出现乱码. Per "fs.readFileSync(filename, 'utf8') doesn't strip BOM markers #1918", fs.readFile is working as designed: BOM is not stripped from the header of the UTF-8 file, if it exists. It at the discret

  • JavaScript读取本地文件常用方法流程解析

    出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件.如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现.在这篇文章中,我们将通过一些例子来看看它是如何工作的. 文件操作的流程 获取文件 由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用.这可以通过文件选择器<input type='fule' />来完成. <input type="file">

  • javascript读取本地文件和目录方法详解

    JavaScript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详

  • Python读取本地文件并解析网页元素的方法

    如下所示: from bs4 import BeautifulSoup path = './web/new_index.html' with open(path, 'r') as f: Soup = BeautifulSoup(f.read(), 'lxml') titles = Soup.select('ul > li > div.article-info > h3 > a') for title in titles: print(title.text) 输出: Sardinia

  • java 读取本地文件实例详解

    java 读取本地文件实例详解 用javax.xml.w3c解析 实例代码: package cn.com.xinli.monitor.utils; import org.w3c.dom.Document; import org.w3c.dom.Element; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import java.io.File; /** *

  • js利用FileReader读取本地文件或者blob方式

    目录 FileReader读取本地文件或blob 一.FileReader的使用 二.FileReader的方法 三.FileReader的属性 四.FileReader的事件 使用FileReader读取本地磁盘文件问题 FileReader读取本地文件或blob FileReader对象提供了异步读取存储在用户计算机上的文件的内容,使用 File或 Blob 对象指定要读取的文件或数据,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. 一.FileReader的使用 注

  • php读取本地文件常用函数(fopen与file_get_contents)

    下面我们以.txt文件为实例来介绍php读取本地文件的函数,读取文件我们可以利用fopen或file_get_contents来读取,file_get_contents更简单而fopen需要fread配合才可以显示读出的内容. 1.首先来介绍一下fopen()函数 下面我们给出了一个直接打开本地文件的代码demo,必要的地方我们都已经加上了注释: 复制代码 代码如下: //直接打开一个本地文件的实例代码       <?php       //假若我们本地的文件是一个名为xmlas.txt的文本

  • 详解Java读取本地文件并显示在JSP文件中

    详解Java读取本地文件并显示在JSP文件中 当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存取少量图片的情况下,采用相对路径存储图片的情况下最方便,也最实用.但是当图片数量过多时,这种方式就显的有些掣肘了. 当系统的图片数量过多时,如果仍把这些图片当做项目的一部分去发布,势必会大大延长项目的发布时间及更新时间.对于某些对于时限性要求特别高的系统来说,采

  • 通过Java读取xml文件内容过程解析

    这篇文章主要介绍了通过Java读取xml文件内容过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要下载jar包dom4j:https://dom4j.github.io/ package com.zyb.xml; import java.io.File; import java.util.Iterator; import org.dom4j.Attribute; import org.dom4j.Document; import or

  • 使用BufferedReader读取本地文件的操作

    BufferedReader读取本地文件 在使用BufferedWriter写入文件时,如果忘记关闭文件(close)同时也没有调用flush(),则被写入的文件中是没有内容的. 在关闭文件的同时系统会自动调用flush() try { File file=new File("c://aa.txt"); FileInputStream is=new FileInputStream(file); InputStreamReader reader=new InputStreamReader

随机推荐