[转]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 ...
随机推荐
- TCP/IP与套接字
以前我们讲过进程间通信,通过进程间通信可以实现同一台计算机上不同的进程之间通信. 通过网络编程可以实现在网络中的各个计算机之间的通信. 进程能够使用套接字实现和其他进程或者其他计算机通信. 同样的套接 ...
- winform GDI基础（二）画带圆角的矩形框
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; g.SmoothingMode ...
- SQLite 如何清空表数据并将递增量归零
SQLite并不支持TRUNCATE TABLE语句 方式一: DELETE FROM [Tab_User] --不能将递增数归零 方式二: DELETE FROM sqlite_sequence W ...
- Oauth Client Credentials Grant
http://www.cnblogs.com/dudu/p/4569857.html OAuth真是一个复杂的东东,即使你把OAuth规范倒背如流,在具体实现时也会无从下手.因此,Microsoft. ...
- LINQ和Lambda表达式
前言 前段时间接触了一种新的表达式,但是不知道这个是什么意思,所以就先站在巨人的肩膀用了,现在听师哥说这种写法是Lambda表达式.我一直以为,这个Lambda表达式和LINQ查询有异曲同工之妙,可惜 ...
- ASP.NET-GridView之固定表数据滚动
有时候,在线Web开发时,需要显示的数据往往会超过我们规定的表格长度,所以为了方便显示大量数据,为了美观,这里提出了两种显示数据方式. ①可以滚动显示数据但是表头未能获取 效果显示 前端DEMO &l ...
- uoj#448. 【集训队作业2018】人类的本质（Min_25筛+拉格朗日插值）
题面 传送门 题解 肝了整整一天--膜拜yww和cx巨巨--(虽然它们的题解里我就没看懂几个字) 请备好草稿纸和笔,这种题目就是需要耐心推倒 题目所求是这么一个东西 \[ \begin{aligned ...
- Python翻译器
import urllib.request import urllib.parse import json content='有了我,翻译再也不是问题啦' print(content) while c ...
- linux查找包含某个字符的文件并导出文件名
find ./ -name "*" | xargs grep -l "字符串" > 1.txt
- P3172 [CQOI2015]选数（莫比乌斯反演）
[题目链接] https://www.luogu.org/problemnew/show/P3172 [题解] https://www.luogu.org/blog/user29936/solutio ...