今天小编给大家分享一下Js怎么根据文件夹目录获取Json数据输出demo的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
1.搭建初始样式(html,css)
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>h3 {text-align: center;}#file_input {display: none;}.userBtn {padding: 6px 25px;background: #00bfff;border-radius: 4px;color: white;cursor: pointer;border: none;}.userBtn:active {background-color: #00bfff90;}.userBtn[disabled] {background: #00bfff60;cursor: not-allowed;}#dataShowArea {width: 100%;height: 600px;border: 1px solid #000;box-sizing: border-box;margin-top: 20px;overflow: hidden;padding: 20px;padding-top: 10px;background: #0cff0014;border-radius: 6px;display: flex;flex-wrap: wrap;flex-direction: column;}#dataShowArea #realityArea {width: 100%;flex: 1;overflow: overlay;box-sizing: border-box;margin: 0px;color: #3300ed;border-radius: 6px;}#dataShowArea #realityArea::-webkit-scrollbar {display: none;}#dataShowArea .hintUser{width: 100%;color: #3300ed;text-align: center;font-style: italic;margin-bottom: 10px;}.userBtnArea{width: 100%;display: flex;align-items: center;justify-content: space-around;}</style></head><body><h3>文件夹路径生成json文件</h3><div class="userBtnArea"><button id="coverInput" class="userBtn" onclick="coverInputClick()">选择文件夹</button><button id="saveJson" class="userBtn" onclick="saveJsonFile()" disabled>输出JSON文件</button></div><!-- 选取单个文件夹 --><input type="file" id="file_input" webkitdirectory directory onchange="outputFile(this.files)" /><!-- 存放加载文件的数据的区域 --><div id="dataShowArea"><div class="hintUser">数据预览</div><pre id="realityArea" class="hljs"></pre></div><script>//全局的文件 json 数据let filesData = '';let obj = document.getElementById('realityArea');let saveJsonBtn = document.getElementById('saveJson');</script></body></html>2.文件夹目录转换成JSON数据
//File 文件格式需要转成 Object => 将字段提出方便装换const fileField = [ 'lastModified', 'lastModifiedDate', 'name', 'size', 'type', 'webkitRelativePath',];//文件 目录数据生成async function handleFiles(files) { if (files.length > 0) { let catalogue = { // childer:{} }; for (fileItem of files) { //获取要插入的对象 => File类型不能直接插入，会报错 => File类型不归属于Object类型 let fileData = {}; fileField.forEach((item) => { fileData[item] = eval(`fileItem.${item}.toString()`); }); //文件的name值为 xx.文件属性 会在执行插入语句时报错，只拿文件名，不拿文件属性 fileData.noTypeName = fileData.name.split('.')[0]; let fileData_ = JSON.stringify(fileData); //获取树的每个字段 let catalogueField = fileItem.webkitRelativePath.split('/'); //要执行的js语句拼接 let objStr = catalogueField.reduce((pre, cur, index, arr) => { if (index >= arr.length - 1) { !eval(pre) && eval(`${pre}={isLeaf:true}`); pre = `${pre}['${fileData.noTypeName}']`; } else { index == 0 ? (pre = `${pre}['${cur}']`) : (pre = `${pre}.Folder['${cur}']`); !eval(pre) && eval(`${pre}={isLeaf:false,type:'folder',Folder:{}}`); } return pre; }, 'catalogue'); eval(`${objStr}={isLeaf:true,...${fileData_}}`); } return catalogue; }}3.JSON数据输出成JSON文件
//写成json文件输出function saveToJson(data) { if (!data) { console.error('json文件的数据对象不存在'); return; } var content = JSON.stringify(data, null, '\t'); // 转成blob数据对象 var blob = new Blob([content], { type: 'text/plain;charset=utf-8', }); //第二步 => 文件数据 转为可以 下载 的地址路径 改路径指向文件数据 let url = window.URL.createObjectURL(blob); //动态创建a标签 => 模拟触发a标签的下载 => 用于将生成的json数据下载到本地 let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', 'model.json'); document.body.appendChild(link); link.click(); document.body.removeChild(link); //URL.createObjectURL函数创建的数据不会再内存删除 得手动删除或者浏览器转态退出 window.URL.revokeObjectURL(url);}4.完整代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>h3 {text-align: center;}#file_input {display: none;}.userBtn {padding: 6px 25px;background: #00bfff;border-radius: 4px;color: white;cursor: pointer;border: none;}.userBtn:active {background-color: #00bfff90;}.userBtn[disabled] {background: #00bfff60;cursor: not-allowed;}#dataShowArea {width: 100%;height: 600px;border: 1px solid #000;box-sizing: border-box;margin-top: 20px;overflow: hidden;padding: 20px;padding-top: 10px;background: #0cff0014;border-radius: 6px;display: flex;flex-wrap: wrap;flex-direction: column;}#dataShowArea #realityArea {width: 100%;flex: 1;overflow: overlay;box-sizing: border-box;margin: 0px;color: #3300ed;border-radius: 6px;}#dataShowArea #realityArea::-webkit-scrollbar {display: none;}#dataShowArea .hintUser{width: 100%;color: #3300ed;text-align: center;font-style: italic;margin-bottom: 10px;}.userBtnArea{width: 100%;display: flex;align-items: center;justify-content: space-around;}</style></head><body><h3>文件夹路径生成json文件</h3><div class="userBtnArea"><button id="coverInput" class="userBtn" onclick="coverInputClick()">选择文件夹</button><button id="saveJson" class="userBtn" onclick="saveJsonFile()" disabled>输出JSON文件</button></div><!-- 选取单个文件 --><!-- <input type="file" id="file" onchange="handleFiles(this.files)" /> --><!-- 选取多个文件 --><!-- <input type="file" id="file_input" multiple="multiple" onchange="handleFiles(this.files)" /> --><!-- 选取单个文件夹 --><input type="file" id="file_input" webkitdirectory directory onchange="outputFile(this.files)" /><!-- 存放加载文件的数据的区域 --><div id="dataShowArea"><div class="hintUser">数据预览</div><pre id="realityArea" class="hljs"></pre></div><script>//全局的文件 json 数据let filesData = '';let obj = document.getElementById('realityArea');let saveJsonBtn = document.getElementById('saveJson');//按钮点击触发input标签的点击function coverInputClick() {document.getElementById('file_input').click();}//报错json文件function saveJsonFile(data) {saveToJson(filesData);}//File 文件格式需要转成 Object => 将字段提出方便装换const fileField = ['lastModified','lastModifiedDate','name','size','type','webkitRelativePath',];//文件 目录数据生成async function handleFiles(files) {if (files.length > 0) {let catalogue = {// childer:{}};for (fileItem of files) {//获取要插入的对象 => File类型不能直接插入，会报错 => File类型不归属于Object类型let fileData = {};fileField.forEach((item) => {fileData[item] = eval(`fileItem.${item}.toString()`);});//文件的name值为 xx.文件属性 会在执行插入语句时报错，只拿文件名，不拿文件属性fileData.noTypeName = fileData.name.split('.')[0];let fileData_ = JSON.stringify(fileData);//获取树的每个字段let catalogueField = fileItem.webkitRelativePath.split('/');//要执行的js语句拼接let objStr = catalogueField.reduce((pre, cur, index, arr) => {if (index >= arr.length - 1) {!eval(pre) && (eval(`${pre}={isLeaf:true}`))pre = `${pre}['${fileData.noTypeName}']`;} else {index == 0 ? pre = `${pre}['${cur}']` : pre = `${pre}.Folder['${cur}']`;!eval(pre) && (eval(`${pre}={isLeaf:false,type:'folder',Folder:{}}`))}// !eval(pre) && (eval(`${pre}={isLeaf:false}`))return pre;}, 'catalogue');eval(`${objStr}={isLeaf:true,...${fileData_}}`);};return catalogue;}}//写成json文件输出function saveToJson(data) {if (!data) {console.error("json文件的数据对象不存在");return;}var content = JSON.stringify(data, null, '\t');// 转成blob数据对象var blob = new Blob([content], {type: "text/plain;charset=utf-8"});//第二步 => 文件数据 转为可以 下载 的地址路径 改路径指向文件数据let url = window.URL.createObjectURL(blob);//这里你会看到类似的地址：blob:http://localhost:8080/d2dbbe3f-7466-415b-a2d0-387cff290acbconsole.log(url);//动态创建a标签 => 模拟触发a标签的下载 => 用于将生成的json数据下载到本地let link = document.createElement('a');link.style.display = "none";link.href = url;link.setAttribute('download', 'model.json');document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(url);}function outputFile(files) {filesData = '';btnDisabled(saveJsonBtn);handleFiles(files).then(res => {filesData = res;btnCanClick(saveJsonBtn)obj.innerText = JSON.stringify(res, null, 2);}).catch(err => {console.error(err)})}function btnCanClick(btnObj) {btnObj.removeAttribute('disabled');}function btnDisabled(btnObj) {btnObj.setAttribute('disabled', 'disabled');}</script></body></html>预览
以上就是“Js怎么根据文件夹目录获取Json数据输出demo”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
