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

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

游九尘

1143人浏览 · 2024-04-21 22:15:16

游九尘 · 2024-04-21 22:15:16 发布

一、上传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();

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：3 个月前 )

f06604fc * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me> Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 7 天前

d23291ba * add a ci step for Json_Diagnostic_Positions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * Update ci.cmake to address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typo in the comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typos in ci.cmake Signed-off-by: Harinath Nampally <harinath922@gmail.com> * invoke the new ci step from ubuntu.yml Signed-off-by: Harinath Nampally <harinath922@gmail.com> * issue4561 - use diagnostic positions for exceptions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci check failures for unit-diagnostic-postions.cpp Signed-off-by: Harinath Nampally <harinath922@gmail.com> * improvements based on review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix const correctness string Signed-off-by: Harinath Nampally <harinath922@gmail.com> * further refinements based on reviews Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add one more test case for full coverage Signed-off-by: Harinath Nampally <harinath922@gmail.com> * ci check fix - add const Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add unit tests for json_diagnostic_postions only Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_diagnostics Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_build_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> --------- Signed-off-by: Harinath Nampally <harinath922@gmail.com> 7 天前