本文转自：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/skz12345/WordCount PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) Planning 计划 40 60 · Esti ...

  2. python使用基础（win10）

    1.安装 官网下载:https://www.python.org/ 请选择2.X版本 2.从命令提示符打开python 直接输入python点enter即可 查看python版本输入python -V ...

  3. 【Android小技巧】android 按键如何能自动触发点击

    使用button.performClick();方法 EditText 中hint的字体跟 textSize的字体大小一样大

  4. springcloud中通过Filter实现微服务跨域访问允许

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...

  5. 查询sql语句的执行时间

    我们开启执行计划来看sql语句的执行效率,看下索引是否使用等 但是执行计划没有告诉我们执行时间,刚刚看了一个代码,可以自己计算执行时间的 Declare @d Datetime      Set @d ...

  6. 更新XML的Attribute(属性)

    有一个XML文档,一个属性"pk"错了,正确是2.我们怎样把它更改正确?原XML文档如下: <?xml version="1.0" encoding=&q ...

  7. asp如何让panel居中

    把panel放在一个table的td中,并把position设为relative,就可以在设计中直接调整它的位置了

  8. Python 文件和异常

    一.从文件中读取数据 #!/usr/bin/env python with open('pi') as file_object: contents = file_object.read() print ...

  9. 微信小程序强制横屏办法

    最近想学习学习微信小程序开发,本着先设计,再查找具体实现的方法的想法,在进行数据统计时,想着竖屏展示数据会造成重叠,或者数据显示不全而用省略号代替的问题,所以计划采用横屏的方式显示数据表格. 搜索到两 ...

  10. srs录制视频时间戳有点问题

    srs2或者srs3目前最新的版本和之前的版本,使用dvr功能录制flv文件.使用本地播放器,如ffplay.potplayer.vlc.KMP和MPV等,都是正常的播放完整视频.但是使用web fl ...