[转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript
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>
posted on 2014-01-02 15:56 freeliver54 阅读(580) 评论(1) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步