本文转自：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. C# 重写WndProc 拦截 发送 系统消息 + windows消息常量值

    接收拦截+发送消息 对于处理所有消息.net 提供了wndproc进行重写 WndProc(ref Message m)protected override void WndProc(ref Mess ...

  2. SGML DTD

    最近处理SGML文档时,碰到的DTD语法: <!ELEMENT name - - (#PCDATA)>  说明:- - 代表 name 元素有开始标识和结束标识 <!ELEMENT ...

  3. ajax上传json串格式的数据的处理 以及 js操作dom的另一种方式

  4. 写RestApi需要注意些什么？

    PS1="\n[\e[32;1m]([\e[37;1m]\u[\e[32;1m])-([\e[37;1m]jobs:\j[\e[32;1m])-([\e[37;1m]\w[\e[32;1m] ...

  5. 转场动画CALayer (Transition)

    1.将对应UI控件的层调用以下接口即可 1.1 .h文件 // // 文 件 名:CALayer+Transition.h // // 版权所有:Copyright © 2018年 leLight. ...

  6. doges

    dogse入门指南 Dogse作为游戏服务端引擎,目前只包含游戏服务端的核心部分,但这也是最核心的部分.它全部使用.net c#开发,充分兼顾了程序性能与代码编写的准确性与易用性,再加上以vs作为开发 ...

  7. 高级工程师->架构师

    1. 分解等级 技术人员典型的发展路径基本上都是下面的这个模式: 1) 0 ~1年:菜鸟,需要别人手把手来教 2)1 ~ 3年:初级,需要别人带你做 3)3 ~ 5年:高级,能独当一面,可以带初级技术 ...

  8. loj #547. 「LibreOJ β Round #7」匹配字符串

    #547. 「LibreOJ β Round #7」匹配字符串   题目描述 对于一个 01 串(即由字符 0 和 1 组成的字符串)sss,我们称 sss 合法,当且仅当串 sss 的任意一个长度为 ...

  9. spring中使用缓存

    一.启用对缓存的支持 Spring 对缓存的支持最简单的方式就是在方法上添加@Cacheable和@CacheEvict注解, 再添加注解之前,必须先启用spring对注解驱动的支持,基于java的配 ...

  10. kuangbin专题七 POJ3468 A Simple Problem with Integers （线段树或树状数组）

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...