JavaScript 直接操作本地文件的实现代码

日前，Mozilla向W3C提交了一个草案，旨在推出一个JavaScript API，让JavaScript 脚本直接操作本地文件，Firefox的最新浏览器版本中已经对该API提供了大量的支持，不过出于安全考虑，该API将只对本地文件提供有限的访问。
该API引入了一个FileReader 对象，可以异步加载本地文件系统中的文件，并允许开发者为诸如加载失败，进度，加载完成等事件分配回调函数，它提供的方法可以从本地文件中读取文本或二进制数据，并通过一个 abort 方法随时打断操作。

　　FileReader对象使客户端的文件访问成为现实，用户不必再象以前那样首先将文件上传到服务器才能处理，事实上，IE 和 Firefox 已经拥有一些非标准的方法访问本地文件，但这些方法并非标准 JavaScript 行为。

　　FileReader对象并不需要特别的权限，但出于显然的安全考虑，直接使用文件路径进行访问是不允许的，必须结合常规的 HTML file 对象，用户点击浏览之后，选择本地文件，JavaScript 再通过 DOM 引用该文件并进行操作，这个机制使得该 API 相对安全一些，因为任何本地文件的获取都需要用户的人工参与。

　　以下例子使用该 API 打开一个本地文件并将文件内容显示在一个 div 容器中，我们甚至可以在 div 上加上 contentEditable 属性，用户可以直接编辑文件的内容，不过，该 API 并没有提供将文件内容写回本地文件的方法，因此你编辑的内容无法保存。

尽管在JavaScript中增加API并非多么重大的技术革命，但它将拓展 Web 应用的视野，让 Web 平台实现越来越多的功能。

赞 (0)

相关推荐

  • 纯js实现无限空间大小的本地存储

    纯js实现无限空间大小的本地存储

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了, 项目地址https://github.com/xueduany/localstore, demo见http://xueduany.github.io/localstore/, 下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstor

  • javascript IE7 浏览器本地图片预览

    说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片.并提供对此图片的剪切和改变尺寸的操作.如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) enabled:可选项.布尔值(Boolean).设

  • 用js实现下载远程文件并保存在本地的脚本

    //use: cscript this.js http://www.xxx.com/xxx.exe c:\xxx.exe var objArgs = WScript.Arguments; var sGet=new ActiveXObject("ADODB.Stream"); var xGet = false; try { xGet = new XMLHttpRequest(); }  catch (trymicrosoft) { try {     xGet = new ActiveX

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • JS限制上传图片大小不使用控件在本地实现

    JS限制上传图片大小不使用控件在本地实现

    文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件.使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小 具体代码如下   复制代码 代码如下: <script language=javascript> var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.p

  • js自动下载文件到本地的实现代码

    复制代码 代码如下: <html> <head> <title>js自动下载文件到本地</title> <script language="javascript" type="text/javascript"> function InitAjax() { var ajax; if(window.ActiveXObject){ var versions = ['Microsoft.XMLHTTP', 'MSX

  • 通过JS获取用户本地图片路径并显示的代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript 保存文件到本地实现方法

    2种形式都可以 第一种: 复制代码 代码如下: <script> function SaveAs5(imgURL) { var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == &

  • javascript 火狐(firefox)不显示本地图片问题解决

    <img id="img1" src=""/> <script> function fileChange(obj) { var url = obj.value url = "file:///" + url.replace("\\",'/'); alert(url); document.getElementById("img1").src= url; } </script>

  • JavaScript 直接操作本地文件的实现代码

    JavaScript 直接操作本地文件的实现代码

    日前,Mozilla向W3C提交了一个草案,旨在推出一个JavaScript API,让JavaScript 脚本直接操作本地文件,Firefox的最新浏览器版本中已经对该API提供了大量的支持,不过出于安全考虑,该API将只对本地文件提供有限的访问. 该API引入了一个FileReader 对象,可以异步加载本地文件系统中的文件,并允许开发者为诸如加载失败,进度,加载完成等事件分配回调函数,它提供的方法可以从本地文件中读取文本或二进制数据,并通过一个 abort 方法随时打断操作. FileR

  • 使用Python操作excel文件的实例代码

    使用的类库 pip install openpyxl 操作实现 •工作簿操作 # coding: utf-8 from openpyxl import Workbook # 创建一个excel工作簿 wb = Workbook() # 打开一个工作簿 wb = load_workbook('test.xlsx') # 保存工作簿到文件 wb.save('save.xlsx') •工作表操作 # 获得当前的工作表对象 ws = wb.active # 通过工作表名称得到工作表对象 ws = wb.

  • python操作toml文件的示例代码

    # -*- coding: utf-8 -*- # @Time : 2019-11-18 09:31 # @Author : cxa # @File : toml_demo.py # @Software: PyCharm import toml import os BASE_DIR = os.path.dirname(os.path.abspath(__file__)) class FileOperation: def __init__(self): self.dic = dict() self

  • JavaScript中使用ActiveXObject操作本地文件夹的方法

    在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <t

  • 通过Javascript创建一个选择文件的对话框代码

    通过Javascript创建一个选择文件的对话框代码

    CSS 样式: 复制代码 代码如下: DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDT

  • C#操作本地文件及保存文件到数据库的基本方法总结

    命名空间: using System.IO; 写文本文件 StreamWriter sw=File.CreateText("c:\\text.txt"); sw.WriteLine("C#"); //写入一行文本 sw.Write("www.csdn.net"); //在文本末尾写入文本 sw.Flush(); //清空 sw.Close(); //关闭 读文本文件 StreamReader sr = File.OpenText("c:

  • Javascript如何递归遍历本地文件夹

    打印本地temp folder所有的文件及最后修改时间: <html> <head> <script language="javascript"> var s = ""; var result = []; function FileInfo(path, name,time) { this.path = path; this.name = name; this.time = time; } function showFolderFi

  • JavaScript File API实现文件上传预览

    JavaScript File API实现文件上传预览

    一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽

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

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

  • python操作xlsx文件的包openpyxl实例

    Python扩展库openpyxl,可以操作07版以上的xlsx文件.可以创建工作簿.选择活动工作表.写入单元格数据,设置单元格字体颜色.边框样式,合并单元格,设置单元格背景等等. 需要增加可以颜色进入包安装目录的 your_pthon_path/site-packages/openpyxl/styles 修改colors.py文件下的 COLOR_INDEX = ( '00000000', '00FFFFFF', '00FF0000', '0000FF00', '000000FF', #0-4

随机推荐