JSはデータの導入とダウンロードを実現します.
12745 ワード
直接コードを入れてください.説明は全部コードの中にあります.
<!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>