Html5--本地文本文件读取与保存

最新推荐文章于 2024-11-10 22:26:50 发布

原创最新推荐文章于 2024-11-10 22:26:50 发布 · 1.7w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #文件存取

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML5实现文件导入导出的例子，通过JavaScript操作读取文件内容并将其显示在网页上，同时提供了导出文件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UFT-8">

<script src="jquery-1.8.2.js" ></script>
<script src="FileSaver.js" charset="utf-8"></script>
</head>
<body >

<div>
<div>
<input type="file" id="files" style="display:none" onchange="fileimport();"/>
<input type="button" id="import" value="导入"/>

<input type="button" id="export" value="导出"/>
</div>
</div>
<script>
var txtdata;
function fileimport()
{
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小："+size);

var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
reader.readAsText(selectedFile,'gb2312');//读取文件的内容，注意编码方式

reader.onload = function(){
console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
$('<pre>' + this.result + '</pre>').appendTo('body');
txtdata = this.result;
};
}

$(document).ready(function(){
//alert("start");
$("#import").click(function(){//点击导入按钮，使files触发点击事件，然后完成读取文件的操作。
$("#files").click();
});

$("#export").click(function(){
var content = "这是直接使用HTML5进行导出的:"+txtdata;
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "file.txt");//saveAs(blob,filename) //仅限于chorme的下载目录里
//alert("export OK")
});
})
</script>
</body>
</html>