本文轉自:http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/javascript
The HTML and JavaScript code below makes use of some features of HTML5html
(specifically the 「Blob」 object, the File API, and the 「download」 attribute of the 「a」 tag) html5
to allow the user to load, edit, and save a text file on their local computer. java
As of this writing,web
it works in both Chrome and Firefox browsers, app
though sadly it requires a little bit of custom code for each.wordpress
<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>