使用背景：
测试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>