JS实现数据导入及导出下载

master336

发布于 2026-06-15 19:02:15

810

直接上代码吧，解释都在代码里了

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除

数据