本文转自：http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

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的更多相关文章

  1. shell脚本执行时报"bad interpreter: Text file busy"的解决方法

    在执行一个shell脚本时,遇到了“-bash: ./killSession.sh: /bin/bash: bad interpreter: Text file busy”错误提示,如下所示: [or ...

  2. eclipse的使用-------Text File Encoding没有GBK选项的设置

    eclipse的使用-------Text File Encoding没有GBK选项的设置 2013-12-25 09:48:06 标签:java myeclipse使用 有一个项目是使用GBK编码的 ...

  3. 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 ...

  4. create feature from text file

    '''---------------------------------------------------------------------------------- Tool Name: Cre ...

  5. 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 ...

  6. 【转】shell脚本执行时报"bad interpreter: Text file busy"的解决方法

    1)问题现象: 在ubuntu下执行以下脚本( while_count),报错: -bash: ./while_count: /bin/bash: bad interpreter: Text file ...

  7. New text file line delimiter

    Window -> Preferences -> General -> Workspace : Text file encoding :Default : 选择此项将设定文件为系统默 ...

  8. [转]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 ...

  9. unity, read text file

    using System.IO; //test read txt        //Resources.Load(...) loads an asset stored at path in a Res ...

随机推荐

  1. 20169219《Linux内核原理与分析》第八周作业

    网易云课堂学习 task_struct数据结构 struct task_struct { volatile long state;进程状态 void *stack; 堆栈 pid_t pid; 进程标 ...

  2. 循环中标签outer用法：break outer continue outer

    1.outer: break 如果不使用标签,break跳出里层for循环,使用break标签,则跳出两层循环 输出:i:0 j:0 i:0 j:1 public class breakTest { ...

  3. oracle-dmp文件导入导出过程命令

    创建表空间 create tablespace coss datafile 'D:\soft\db\oracle\oradata\orcl\coss.dbf' size 1000m autoexten ...

  4. Fragment之间通过add切换时的显示与隐藏

    新手,不知道用什么方法实现 ,通过动态的方法显示了Fragment   A,在这个里面点击列表项时add方法动态加载Fragment  B,但是两者都会一起显示,重叠在一起了,如果用replace方法 ...

  5. Spring.Net 未将对象引用设置到对象的实例

    “/”应用程序中的服务器错误. 未将对象引用设置到对象的实例. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详 ...

  6. HTTP状态码了解

    1xx   - - 消息 2xx   - - 成功 3xx   - - 重定向 4xx   - - 请求错误 5xx   - - 服务器错误 1xx-信息提示 这些状态代码表示临时的响应.客户端在收到 ...

  7. 数组谓词查询法 NSPredicate

    NSPredicate:谓词 字面翻译是这个意思,但是我觉得谓词这个词太难以理解了 NSPredicate的具体用途应该还是过滤,类似于过滤条件之类的,相当于一个主语的谓语,所以说会是谓词这个名字.( ...

  8. 等和的分隔子集(DP)

    晓萌希望将1到N的连续整数组成的集合划分成两个子集合,且保证每个集合的数字和是相等.例如,对于N=3,对应的集合{1,2,3}能被划分成{3} 和 {1,2}两个子集合. 这两个子集合中元素分别的和是 ...

  9. Python学习过程（一）

    Hi,最近得知了有这么一种计算机语言,名字叫Python,下面对自己从零开始学习的一个记录.被大家所熟知的语言有很多种,比如说C语言 .java .C++  .C#等,以及javascri和火的一塌糊 ...

  10. P3380 【模板】二逼平衡树（树套树） 线段树套平衡树

    \(\color{#0066ff}{ 题目描述 }\) 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 查询k在区间内的排名 查询区间内排名为k的值 修改某一位值上 ...