txt文件读取转化成json数组

最新推荐文章于 2023-02-26 17:57:18 发布

原创最新推荐文章于 2023-02-26 17:57:18 发布 · 6.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js #txt操作

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的功能，能够将用户上传的TXT或CSV文件内容读取并转换为JSON数组。通过分析文件的每一行，将其字段映射为JSON对象的键值对，最终形成一个JSON数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>txt文件读取转化成json数组</title>
</head>
<body>
    <div class="upload cont">
            <label>绘图文件</label>
            <label class="btn-file cont" for="file">选择文件</label>
            <input class="file" type="file" name="" id="file" onchange="readFile(this);">
            <label class="explain-file">上传文字说明</label>
        </div>
        <div class="fileData"></div>
</body>
</html>
<script type="text/javascript" src="../../jquery-1.11.3.min.js"></script>
<script type="text/javascript">
  /*从txt或者csv中读取的数据*/
    var _FileData;
    var _FileName="";
    // 读取本地文件
    function readFile(input){
        $('.condition .add-new').remove();
        $("#table").html("");
        // 支持chrome IE10
        var file = input.files[0];
        _FileName=$("#file").val();
        _FileName=_FileName.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");  //正则表达式获取文件名，不带后缀
        var reader = new FileReader();
        reader.readAsText(file,'utf-8');
        reader.onloadend = function() {
            var fileContent=this.result;
            var arrLine=fileContent.split("\r\n");
            var arrHead=arrLine[0].split(",");
            var str="<thead>";
            for(var i=0;i<arrHead.length;i++){
                $("#xValue,.element-select,#lon,#lat,#elem").append("<option>"+arrHead[i]+"</option>");
            }
            console.log(arrHead)//键
            var jsonArrayStr="";//值
            for(var i=1;i<arrLine.length;i++){
                if(arrLine[i].length==0){
                    continue;
                }
                var arrItem=arrLine[i].split(",");
                var jsonStr="";//json数组中的每条数据
                if(jsonArrayStr.length>0){
                    jsonArrayStr+=",";
                }
                for(var j=0;j<arrItem.length;j++){
                    if(jsonStr.length>0){
                        jsonStr+=",";   
                    }
                    jsonStr+="\""+arrHead[j]+"\":\""+arrItem[j]+"\"";
                }
                jsonArrayStr+="{"+jsonStr+"}";
            }
            _FileData=eval("(["+jsonArrayStr+"])");
            console.log(_FileData)//转化成json数组
            $('.fileData').text(jsonArrayStr);
            // 重新初始化file
            var file = document.getElementById('file');
            file.outerHTML = file.outerHTML; // 重新初始化了file的html
        }
    }
</script>