zoukankan      html  css  js  c++  java
  • [转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript

    本文转自: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="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>
  • 相关阅读:
    多线程,超时处理
    多线程,超时处理
    多线程,超时处理
    如何使用vue2搭建ElementUI框架
    pip 报错 ssl_.py:339: SNIMissingWarning: An HTTPS request has been made, but the SNI
    从单机到2000万QPS: 知乎Redis平台发展与演进之路
    OAuth2和JWT
    收集统计信息 不会更新DDL时间
    Python爬虫入门教程 8-100 蜂鸟网图片爬取之三
    Python爬虫入门教程 7-100 蜂鸟网图片爬取之二
  • 原文地址:https://www.cnblogs.com/freeliver54/p/3502030.html
Copyright © 2011-2022 走看看