ini文件格式和读取

琪公子呀

已于 2022-07-06 17:30:36 修改

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript css html 开发语言 ini

于 2022-07-06 17:25:46 首次发布

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/125644088

版权

JavaScript 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

INI ”就是英文 “initialization”的头三个字母的缩写；当然INI file的后缀名也不一定是".ini"也可以是".cfg"，".conf ”或者是".txt"。

INI文件的格式很简单，最基本的三个要素是：parameters，sections和comments。

什么是parameters？

INI所包含的最基本的“元素”就是parameter；每一个parameter都有一个name和一个value，如下所示：

name = value

什么是sections ？

所有的parameters都是以sections为单位结合在一起的。所有的section名称都是独占一行，并且sections名字都被方括号包围着（[ and ])。在section声明后的所有parameters都是属于该section。对于一个section没有明显的结束标志符，一个section的开始就是上一个section的结束，或者是end of the file。Sections一般情况下不能被nested，当然特殊情况下也可以实现sections的嵌套。

section如下所示：

[section]

什么是comments ？

在INI文件中注释语句是以分号“；”开始的。所有的所有的注释语句不管多长都是独占一行直到结束的。在分号和行结束符之间的所有内容都是被忽略的。

注释实例如下：

;comments text

当然，上面讲的都是最经典的INI文件格式，随着使用的需求INI文件的格式也出现了很多变种；

INI实例1：

test.ini

; 通用配置,文件后缀.ini
[common]

application.directory = APPLICATION_PATH  "/application"
application.dispatcher.catchException = TRUE


; 数据库配置
resources.database.master.driver = "pdo_mysql"
resources.database.master.hostname = "127.0.0.1"
resources.database.master.port = 3306
resources.database.master.database = "database"
resources.database.master.username = "username"
resources.database.master.password = "password"
resources.database.master.charset = "UTF8"


; 生产环境配置
[product : common]

; 开发环境配置
[develop : common]

resources.database.slave.driver = "pdo_mysql"
resources.database.slave.hostname = "127.0.0.1"
resources.database.slave.port = 3306
resources.database.slave.database = "test"
resources.database.slave.username = "root"
resources.database.slave.password = "123456"
resources.database.slave.charset = "UTF8"

; 测试环境配置
[test : common]

读取文件：

<?php

$config=parse_ini_file('./test.ini');

print_r($config);

测试打印：

$ php -f test.php
Array
(
    [application.directory] => APPLICATION_PATH/application
    [application.dispatcher.catchException] => 1
    [resources.database.master.driver] => pdo_mysql
    [resources.database.master.hostname] => 127.0.0.1
    [resources.database.master.port] => 3306
    [resources.database.master.database] => database
    [resources.database.master.username] => username
    [resources.database.master.password] => password
    [resources.database.master.charset] => UTF8
    [resources.database.slave.driver] => pdo_mysql
    [resources.database.slave.hostname] => 127.0.0.1
    [resources.database.slave.port] => 3306
    [resources.database.slave.database] => test
    [resources.database.slave.username] => root
    [resources.database.slave.password] => 123456
    [resources.database.slave.charset] => UTF8
)

INI实例2,多维数组：

env.conf

;应用程序配置
[application]
env=develop

[dblist]
dbtype[]=test
dbtype[]=dev
dbtype[]=v1
dbtype[]=release
dbtype[]=online

读取示例：

<?php

//第二个参数设置为true，读取多维数组
$config=parse_ini_file('./env.conf',TRUE);

print_r($config);

测试打印：

$ php -f test.php
Array
(
    [application] => Array
        (
            [env] => develop
        )

    [dblist] => Array
        (
            [dbtype] => Array
                (
                    [0] => test
                    [1] => dev
                    [2] => v1
                    [3] => release
                    [4] => online
                )

        )

)

JS读取ini文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jquery-2.1.0.min.js"></script>
</head>

<body>
    <input class="file" type="file" onchange="jsReadFiles(this.files)" />

    <script>
        //js 读取文件
        function jsReadFiles(files) {
            if (files.length) {
                var file = files[0];
                var reader = new FileReader();//new一个FileReader实例

                // if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
                //     console.log('txt')
                //     reader.onload = function () {
                //         console.log(this.result)
                //         console.log(typeof this.result)
                //         $('body').append('<pre>' + this.result + '</pre>');
                //     }
                //     reader.readAsText(file);
                // } else if (/image+/.test(file.type)) {//判断文件是不是imgage类型
                //     console.log('image')
                //     reader.onload = function () {
                //         console.log(this.result)
                //         console.log(typeof this.result)
                //         $('body').append('<img src="' + this.result + '"/>');
                //     }
                //     reader.readAsDataURL(file);
                // }
                if (file.name.indexOf('.ini') != -1) {
                    console.log('ini')
                    reader.onload = function () {
                        console.log(this.result)

                        console.log(parseINIString(this.result))

                        console.log(typeof this.result)
                        $('body').append('<pre>' + this.result + '</pre>');
                    }
                    reader.readAsText(file);
                } else {
                    console.log('hhhh')
                }
            }
        }

        // http://www.manongjc.com/article/130183.html
        // http://www.gimoo.net/t/1907/5d23e1e9ab4e2.html
        // 本文实例讲述了JavaScript实现解析INI文件内容的方法。分享给大家供大家参考，具体如下：
        // .ini 是Initialization File的缩写，即初始化文件，ini文件格式广泛用于软件的配置文件。
        // INI文件由节、键、值、注释组成。
        // 根据node.js版本的node-iniparser改写了个JavaScript函数来解析INI文件内容，传入INI格式的字符串，返回一个json object。

        function parseINIString(data) {
            var regex = {
                section: /^\s*\s*([^]*)\s*\]\s*$/,
                param: /^\s*([\w\.\-\_]+)\s*=\s*(.*?)\s*$/,
                comment: /^\s*;.*$/
            };
            var value = {};
            var lines = data.split(/\r\n|\r|\n/);
            var section = null;
            lines.forEach(function (line) {
                if (regex.comment.test(line)) {
                    return;
                } else if (regex.param.test(line)) {
                    var match = line.match(regex.param);
                    if (section) {
                        value[section][match[1]] = match[2];
                        
                    } else {
                        value[match[1]] = match[2];
                    }
                } else if (regex.section.test(line)) {
                    var match = line.match(regex.section);
                    console.log(match)
                    value[match[0]] = {};
                    section = match[0];
                } else if (line.length == 0 && section) {
                    section = null;
                };
            });
            return value;
        }
    </script>
</body>

</html>

引用了文章：ini文件格式和读取 - 简书

input[tyle="file"]样式修改及上传文件名显示

默认的上传样式我们总觉得不太好看，根据需求总想改成和上下结构统一的风格……

实现方法和思路：
　　1.在input元素外加a超链接标签
　　2.给a标签设置按钮样式
　　3.设置input[type='file']为透明，并定位，覆盖在a上面

html代码：

<a class="input-file input-fileup" href="javascript:;">
         + 选择文件<input size="100" type="file" name="file" id="file">
</a>
<div class="fileerrorTip1"></div>
<div class="showFileName1"></div>

css代码：

.input-file{
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: auto;
    background-color: #2c7;
    border: solid 1px #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    color:#fff;
    text-decoration: none;
}
.input-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    background-color: #fff;
    transform: translate(-300px, 0px) scale(4);
    height: 40px;
    opacity: 0;
    filter: alpha(opacity=0);
 }

此时并不能显示上传的文件名，如需显示出上传的文件名需要js来处理

js代码：

<script>
        $(function(){
            $(".input-fileup").on("change","input[type='file']",function(){
                var filePath=$(this).val();
                if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
                    $(".fileerrorTip1").html("").hide();
                    var arr=filePath.split('\');
                    var fileName=arr[arr.length-1];
                    $(".showFileName1").html(fileName);
                }else{
                    $(".showFileName1").html("");
                    $(".fileerrorTip1").html("您未上传文件，或者您上传文件类型有误！").show();
                    return false
                }
            })
        })
    </script>

效果：