本文转自：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. HUST高级软件工程--测试管理工具实践--Day1

    测试管理工具实践--Day1 今天完成任务情况: 课前组好队伍,建好微信群. 课上通过老师的介绍,初步了解各种测试工具的使用情况. 课后选取了组长,在微信群经过"广泛而激烈"的讨论 ...

  2. Nor Flash工作原理

    http://blog.chinaunix.net/uid-26876150-id-3723678.html Nor Flash 具有像内存一样的接口,它可以像内存一样读,却不可以像内存一样写,Nor ...

  3. linux core文件机制

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...

  4. js/jq基础（日常整理记录）-3-一个自定义表格

    一.一个自定义的表格 这个js是我刚工作的时候,我们老大让我做一个功能,我觉得html自带的table功能单一,没有分页和排序功能,所有就尝试着做一下,所以这个东西就出来了.很久没写博客了,贴出来吧, ...

  5. springcloud 定义切面实现对请求操作记录日志，方便后面分析接口详情

    package com.idoipo.infras.gateway.open.config; import com.alibaba.fastjson.JSON; import com.alibaba. ...

  6. 【C#】如何打开Model Browser(实体数据模型浏览器)

    Visual Studio 2017 如何打开Model Browser(实体数据模型浏览器) 2017-10-11 十有三 2 浏览:4956 开发工具 Visual Studio 做个笔记,记录下 ...

  7. 【OD深入学习】Java多线程面试题

    一.参考文章 1. Java线程面试题 Top 50 2. Java面试——多线程面试题 3. JAVA多线程和并发基础面试问答 4. 15个顶级Java多线程面试题及回答 二.逐个解答 三.一语中的 ...

  8. 【转】.net算术运算导致溢出

    源地址:http://blog.csdn.net/hawksoft/article/details/70470136

  9. 【微框架】之一：从零开始，轻松搞定SpringCloud微服务系列--开山篇（spring boot 小demo）

    Spring顶级框架有众多,那么接下的篇幅,我将重点讲解SpringCloud微框架的实现 Spring 顶级项目,包含众多,我们重点学习一下,SpringCloud项目以及SpringBoot项目 ...

  10. java读取 500M 以上文件,java读取大文件

    java 读取txt,java读取大文件 设置缓存大小BUFFER_SIZE ,Config.tempdatafile是文件地址 来源博客http://yijianfengvip.blog.163.c ...