文件读取
文件读取要利用到的API是FileReader,在HTML中的元素为:
<body>
<div>
<input type="file" id="files" style="display:none" onchange="importFile();"/>
<input type="button" id="import" value="导入"/>
</div>
</body>
// 导入json文件
function importFile(){
//获取读取的File对象
var selectedFile = document.getElementById("files").files[0];
//读取选中文件的文件名
var name = selectedFile.name;
//读取选中文件的大小
var size = selectedFile.size;
console.log("文件名:"+name+"大小:"+size);
//这里是核心!读取操作就是由它完成的。
var reader = new FileReader();
//读取文件的内容
reader.readAsText(selectedFile);
reader.onload = function(){
//当读取完成之后会回调这个函数,然后此时文件的内容存储到了result中。直接操作即可。
console.log(this.result);
};
}
写出文件
FileReader可以被Chrome、FF和Safari都支持。当然了,要求一定版本以上的。
但是FileWriter似乎只有被Chrome支持。
//首先导入一个Js文件
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
<script>
var button = document.getElementById("export");
button.addEventListener("click", saveHandler, false);
function saveHandler(){
let data = {
name:"hanmeimei",
age:88
}
var content = JSON.stringify(data);
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "save.json");
}
</script>