直接上代碼吧，解釋都在代碼裏了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-文件導入導出</title>
<style type="text/css">
input,textarea {
display:block;
margin-top:20px;
}
</style>
</head>
<body>
<div>
<input type="file" id="files" style="display: none" onchange="fileImport();">
<input type="button" id="fileImport" value="導入">
<input type="button" id="fileDownload" value="導出">
<span id="showfileinfo">文件信息：</span>
<textarea id="showvalue" style="height: 280px;width: 500px;"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//文件選取 (讀取)
$("#fileImport").click(function () {
$("#files").click();
})
// 文件下載（寫入下載）
$("#fileDownload").click(fileDownload)
function fileImport() {
//獲得文件對象
var selectedFile = $('#files')[0].files[0];
//讀取文件名
var name = selectedFile.name;
//讀取大小
var size = selectedFile.size;
$("#showfileinfo").text("文件名:"+name+" 大小:"+size);
//讀取操作
var reader = new FileReader();
//讀取,也可以讀取文件的URL
reader.readAsText(selectedFile);
reader.onload = function () {
//回調函數,存儲文件內容到result
$("#showvalue").val(this.result)
}
}
function fileDownload () {
// 獲取導出文件內容
var text = $("#showvalue").val();
// 創建隱藏的下載文件鏈接
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', "下載.json");
element.style.display = 'none';
document.body.appendChild(element);
// 手動觸發下載
element.click();
// 清理dom
document.body.removeChild(element);
}
</script>
</body>
</html>