- A+
所属分类：.NET技术
使用背景：
测试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>
