[转]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 ...
随机推荐
- POJ 2686 Traveling by Stagecoach (状压DP)
题意:有一个人从某个城市要到另一个城市, 有n个马车票,相邻的两个城市走的话要消耗掉一个马车票.花费的时间呢,是马车票上有个速率值 ,问最后这个人花费的最短时间是多少. 析:和TSP问题差不多,dp[ ...
- Java50道经典习题-程序38 求字符串长度
题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. import java.util.Scanner; public class Prog38 { public stat ...
- SQLServer存储引擎——01.数据库如何读写数据
一.引言 在SQL Server数据库中,数据是如何被读写的?日志里都有些什么?和数据页之间是什么关系?数据页又是如何存放数据的?索引又是用来干嘛的? 一起看看SQL Server的存储引擎. 二.S ...
- Centos7环境下FastRunner前端(FasterWeb)部署
FastRunner前端安装 1.安装和创建Python虚拟环境 安装virtualenvwrapper 2.拉取代码 cd ~ # 环境当前用户home目录 git clone git@github ...
- ubuntu - 14.04，如何使用鼠标右键菜单在shell中打开选择项目？
在shell中执行:“sudo apt-get install nautilus-open-terminal”,随后重新启动系统,在要打开的文件夹上面鼠标右键,会有一个菜单项目“在终端中打开”,点击后 ...
- 【Python发展】pandas和koalas
1.pandas介绍 Python 数据科学在过去几年中爆炸式增长, pandas 已成为生态系统的关键.当数据科学家得到一个数据集时,他们会使用 pandas 进行探索.它是数据处理和分析的终极工具 ...
- 前端的异步解决方案之Promise和Await-Async
异步编程模式在前端开发过程中,显得越来越重要.从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题.随着ES6新标准的出来,处理异步数据流的解决方案又有了新的变化.Promise就是这其 ...
- 云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 （阿里云ECS服务器 ）课堂
云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 1. 开通云服务器 2 1.包年包月 按量付费(适合测试数据的时候) 2 2.地域 服务器数 ...
- ios swift 实现简单MVP模式
在移动开发中,会用到各种架构,比如mvp,mvvm等,其目的就是为了让项目代码的可读性更好,减轻在android(activity) ios(controller)中的大量代码问题.接下来就开始我们的 ...
- 查看ip常见命令...
1.获取ip Unix用户可以在命令提示符中输入ifconfig来获取. 使用Windows的用户,请尝试使用 ipconfig 命令.