多文件（图片，音频，文档等）上传顺序问题（简单记录）

使用背景：

　　测试layui的多图片上传中，发现了一个问题。就是说当多图片上传后顺序无法进行更改，在不修改layui的框架前提下这里有两种方案：1，按照上传时间排序，2用js可以滑块进行拖拽修改。

都不难，这里就简单记录一下，话不多说，开撸！（ps：貌似同步上传可以避免这种问题，没有具体研究。）

c#按顺序获取文件夹中的文件

　　上传则不变，只需要将获取文件的方法重写一下。代码如图：

    public class FileComparer : IComparer
    {
        /// <summary>
        /// 文件排序
        /// </summary>
        /// <param name="o1"></param>
        /// <param name="o2"></param>
        /// <returns></returns>
        int IComparer.Compare(object o1, object o2)
        {
            FileInfo fi1 = o1 as FileInfo;
            FileInfo fi2 = o2 as FileInfo;
            return fi1.CreationTime.CompareTo(fi2.CreationTime);
        }
    }
        public static FileInfo[] GetFilesList(string path)
        {

            var di = new DirectoryInfo(path);//文件夹所在目录
            var fc = new FileComparer();

            FileInfo[] fileList = di.GetFiles();
            Array.Sort(fileList, fc);//按文件创建时间排正序


            return fileList;


        }

目前是按照时间排序，可更改为大小，类型，等具体看需求。

 

js滑块的运用

　　此方式，是利用了文件名称排序的规则，则利用拖拽修改顺序后，进行重新命名。所使用的ui框架是：https://jqueryui.com/sortable/#display-grid，效果如下：

 

 

 

 

 

代码也很简单直接源代码就可以运行。

<!DOCTYPE>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>拖拽排序</title>
    <style>
        .sortable-ghost {
            opacity: 0.4;
            background-color: #F4E2C9;
        }

        .block__list li {
            cursor: pointer;

        }
    </style>
</head>
<!--      <link href="app.css" rel="stylesheet" type="text/css"/>
      -->
<!-- script src="./Sortable.js"></script> -->
<script src="https://cdn.bootcss.com/Sortable/1.8.3/Sortable.js"></script>

<body>
    <button id="btn">关闭拖拽</button>
    <ul id="foo" class="block__list block__list_words">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
       var sortable = new Sortable(document.getElementById('foo'), {
            animation: 150, //动画参数
            disabled: false,//开关状态
            onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
                console.log('onAdd.foo:', [evt.item, evt.from]);
            },
            onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
                console.log('onUpdate.foo:', [evt.item, evt.from]);
            },
            onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
                console.log('onRemove.foo:', [evt.item, evt.from]);
            },
            onStart: function (evt) {  //开始拖拽出发该函数
                console.log('onStart.foo:', [evt.item, evt.from]);
            },
            onSort: function (evt) {  //发生排序发生该事件
                console.log('onSort.foo:', [evt.item, evt.from]);
            },
            onEnd: function (evt) { //拖拽完毕之后发生该事件
                console.log('onEnd.foo:', [evt.item, evt.from]);
            }
        });
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            console.log('123')
            console.log(sortable)
            var state = sortable.option("disabled"); // get
            console.log(state)
            sortable.option("disabled", !state); // set
        }
    </script>
</body>

</html>

　　

 

posted @ 2022-02-23 11:25  黄金程序员  阅读(1490)  评论(0)    收藏  举报