[转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript
The HTML and JavaScript code below makes use of some features of HTML5
(specifically the “Blob” object, the File API, and the “download” attribute of the “a” tag)
to allow the user to load, edit, and save a text file on their local computer.
As of this writing,
it works in both Chrome and Firefox browsers,
though sadly it requires a little bit of custom code for each.
<html>
<body> <table>
<tr><td>Text to Save:</td></tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
</td>
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></input></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>
</table> <script type='text/javascript'> function saveTextAsFile()
{
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value; var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
} downloadLink.click();
} function destroyClickedElement(event)
{
document.body.removeChild(event.target);
} function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0]; var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
} </script> </body>
</html>
[转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript的更多相关文章
- shell脚本执行时报"bad interpreter: Text file busy"的解决方法
在执行一个shell脚本时,遇到了“-bash: ./killSession.sh: /bin/bash: bad interpreter: Text file busy”错误提示,如下所示: [or ...
- eclipse的使用-------Text File Encoding没有GBK选项的设置
eclipse的使用-------Text File Encoding没有GBK选项的设置 2013-12-25 09:48:06 标签:java myeclipse使用 有一个项目是使用GBK编码的 ...
- Writing Text File From A Tabular Block In Oracle Forms
The example given below for writing text file or CSV using Text_IO package from a tabular block in O ...
- create feature from text file
'''---------------------------------------------------------------------------------- Tool Name: Cre ...
- The 12th tip of DB Query Analyzer, powerful in text file process
MA Gen feng ( Guangdong Unitoll Services incorporated, Guangzhou 510300) Abstract It's very powerf ...
- 【转】shell脚本执行时报"bad interpreter: Text file busy"的解决方法
1)问题现象: 在ubuntu下执行以下脚本( while_count),报错: -bash: ./while_count: /bin/bash: bad interpreter: Text file ...
- New text file line delimiter
Window -> Preferences -> General -> Workspace : Text file encoding :Default : 选择此项将设定文件为系统默 ...
- [转]How to Import a Text File into SQL Server 2012
Importing a using the OpenRowSet() Function The OPENROWSET bulk row set provider is accessed by call ...
- unity, read text file
using System.IO; //test read txt //Resources.Load(...) loads an asset stored at path in a Res ...
随机推荐
- Mac下配置MAMP Pro+PHPStorm
一.配置MAMP Pro Hosts 下载地址:http://xclient.info/s/mamp-pro.html 在Hosts页签下,如图所示位置选择你工程目录 二.配置PHPStorm 1.点 ...
- Java泛型读书笔记 (一)
Java泛型 在Java SE7和之后的版本中,在new一个泛型类实例的时候,可以不传入类型参数,因为Java编译器可以通过赋给的变量类型声明推断出来,如下代码: ArrayList<Strin ...
- nodejs nodejs的操作
nodejs的操作 由于版本造成的命令不能正常安装,请参考五问题 一.概念: 参考百度百科: http://baike.baidu.com/link?url=aUrGlI8Sf20M_YGk8mh-- ...
- eclise远程调试
配置很简单,如下: 1. tomcat在bin/catalina.sh中添加如下:declare -x CATALINA_OPTS="-server -Xdebug -Xnoagent -D ...
- 博弈论-一堆nim博弈合在一起
今天A了张子苏大神的的题,感觉神清气爽. 一篇对于多层nim博弈讲的很透彻的博文:http://acm.hdu.edu.cn/forum/read.php?fid=9&tid=10617 我来 ...
- [翻译]CURAND Libaray--Host API--(1)
原文来自:cuda curand toolkit document Translated by xingoo 如果有错误请联系:xinghl90@gmail.com 2Host API简述 使用hos ...
- Kruskal算法 克鲁斯卡尔
30行 #include <iostream> #include <algorithm> using namespace std; int f[5001],n,m,ans=0, ...
- Oracle表的优化一点见解
Oracle优化的几个简单步骤 数据库优化的讨论可以说是一个永恒的主题.资深的Oracle优化人员通常会要求提出性能问题的人对数据库做一个statspack,贴出数据库配置等等.还有的人认为要抓出执行 ...
- COM编程快速入门
COM编程快速入门 COM编程快速入门 http://www.vckbase.com/index.php/wv/1642 COM是一种跨应用和语言共享二进制代码的方法.与C++不同,它提倡源代码重 ...
- spoj COT - Count on a tree(主席树 +lca,树上第K大)
您将获得一个包含N个节点的树.树节点的编号从1到Ñ.每个节点都有一个整数权重. 我们会要求您执行以下操作: uvk:询问从节点u到节点v的路径上的第k个最小权重 输入 在第一行中有两个整数Ñ和中号.( ...