本文转自：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. wordcount程序实现与测试

    GitHub地址 https://github.com/jiaxuansun/wordcount PSP表格 PSP PSP阶段 预估耗时(分钟) 实际耗时(分钟) Planning 计划 10 5 ...

  2. java全栈day02

    今日内容介绍1.变量2.运算符 01变量概述 * A: 什么是变量? * a: 变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器,例如水杯是容器,用来装载水:那么变量是装载什么的呢? ...

  3. java全栈day11----构造方法 综合案例

    构造方法 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是在创建对象的时候就要做的事情,当使用n ...

  4. Nor Flash工作原理

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

  5. 小小c#算法题 - 7 - 堆排序 (Heap Sort)

    在讨论堆排序之前,我们先来讨论一下另外一种排序算法——插入排序.插入排序的逻辑相当简单,先遍历一遍数组找到最小值,然后将这个最小值跟第一个元素交换.然后遍历第一个元素之后的n-1个元素,得到这n-1个 ...

  6. 【转】Linux将composer的bin目录放到PATH环境变量中

    将composer的bin目录放到PATH环境变量中 使用composer global config bin-dir --absolute查看composer的bin目录 输出类似 Changed ...

  7. django 基础框架学习 (二)

    Django框架基础-02 Django缓存cookie 1.说明        当我们服务器在响应数据的同时,希望写⼊⼀些缓存数据到客户端        我们可以选择在响应的同时,将要写⼊到客户端的 ...

  8. vue2.0 vs vue1.0

    1.每个组件模板不支持代码片段组件中模板之前<template> <h3>as</h3></template>现在 必须要有根元素 包裹住所有代码< ...

  9. python 字符串，bytes和hex字符串之间的相互转换

    import binascii datastr='13'#string 类型转换为bytedataByte=str.encode(datastr)#byte串 转换为16进制 byte串 ,比如 b' ...

  10. #6145. 「2017 山东三轮集训 Day7」Easy 动态点分治

    \(\color{#0066ff}{题目描述}\) JOHNKRAM 最近在参加 C_SUNSHINE 举办的聚会. C 国一共有 n 座城市,这些城市由 n−1 条无向道路连接.任意两座城市之间有且 ...