js：上传json文件，并获取json文件内容，下载json文件

游九尘

于 2024-04-21 22:15:16 发布

阅读量321

点赞数 3

分类专栏： HTML JS JQ 文章标签： javascript json

本文链接：https://blog.csdn.net/u012162516/article/details/138047191

版权

HTML JS JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、上传JSON文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Example</title>
</head>
<body>

	<input type="file" id="json-file-input" accept=".json">
	<p id="file-name"></p >
	
	<script>
		// 获取文件输入元素
		const fileInput = document.getElementById('json-file-input');
		// 监听change事件
		fileInput.addEventListener('change', function(event) {
			// 从事件对象中获取文件列表
			const file = event.target.files[0];
			// 检查是否选择了文件
			if (file) {
				// 获取文件名
				const fileName = file.name;
				// 显示文件名
				document.getElementById('file-name').textContent = '选中的文件名: ' + fileName;
			} else {
				// 清除文件名显示
				document.getElementById('file-name').textContent = '';
			}
		});
	</script>

</body>
</html>

二、获取JSON文件内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Import JSON to LocalStorage</title>
</head>
<body>

	<input type="file" id="json-file-input" accept=".json">
	<button onclick="importJsonToLocalStorage()">导入JSON到LocalStorage</button>

	<script>
		function importJsonToLocalStorage() {
			const fileInput = document.getElementById('json-file-input');
			const file = fileInput.files[0];
			
			if (file) {
				const reader = new FileReader();
				
				reader.onload = function(event) {
					try {
						const jsonData = JSON.parse(event.target.result);
						const jsonString = JSON.stringify(jsonData);
					
						// 保存JSON数据到localStorage
						localStorage.setItem('myJsonData', jsonString);
					
						alert('JSON数据已成功保存到LocalStorage!');
					} catch (error) {
						alert('无法解析JSON文件或保存数据到LocalStorage!');
					}
				};
				
				// 读取文件内容
				reader.readAsText(file);
			} else {
				alert('请选择一个JSON文件!');
			}
		}
	</script>

</body>
</html>

三、导出JSON文件

// 创建一个对象
let obj = {
	name: 'John',
	age: 30,
	city: 'New York'
};

// 转换为JSON字符串
let json = JSON.stringify(obj);

// 创建一个blob对象
let blob = new Blob([json], {type: 'application/json'});

// 创建一个链接元素
let link = document.createElement('a');

// 设置链接的href属性为blob的URL
link.href = URL.createObjectURL(blob);

// 设置下载的文件名
link.download = 'data.json';

// 触发下载
link.click();