[转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript
2024-09-29 09:05:37
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>
最新文章
- 使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab
- CSS3媒体查询能检测到的特性小结
- 从语言到库到框架,再到API,再到标记最后到DSL语言
- springMVC+mybatis 进行单元测试时 main SqlSessionFactoryBean - Parsed configuration file: &#39;class path resource&#39; 无限的读取xml文件
- Druid使用ConfigFilter
- iOS - UIStoryboard
- Seafile V4.1 安装笔记
- DataSet数据导出为Excel文档(每个DataTable为一个Sheet)
- PHP CodeBase: 判断用户是否手机访问(转)
- docker端口映射设置
- 【Android 应用程序开发】 Fragment 详细说明
- 移动端页面以rem为单位设置字体大小不生效解决方法
- 关于离线底图和离线shp文件的加载
- Attrib +s +a +h +r 隐藏文件原理与破解
- Swift基础之实现一个镂空图片的小Demo
- odoo开发笔记 -- self详解
- 小小知识点(一)——利用电脑自带的BitLocker对磁盘加密
- Network Architecture Search Survey
- WMS常用表
- 带标签的循环语句、switch