HTML 输入文件按用户选择顺序进行多重排序

Question

如果用户选择多个文件，则需要按用户选择优先级排序（如facebook）。FileList\xc2\xa0需要取决于用户顺序。

\n\n

这是示例代码：

\n\n

\r\n

\r\n

  function handleFileSelect(evt) {\r\n    var files = evt.target.files; // FileList object\r\n\r\n    // files is a FileList of File objects. List some properties.\r\n    var output = [];\r\n    for (var i = 0, f; f = files[i]; i++) {\r\n      output.push(\'<li><strong>\', escape(f.name), \'</strong> (\', f.type || \'n/a\', \') - \',\r\n                  f.size, \' bytes, last modified: \',\r\n                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : \'n/a\',\r\n                  \'</li>\');\r\n    }\r\n    document.getElementById(\'list\').innerHTML = \'<ul>\' + output.join(\'\') + \'</ul>\';\r\n  }\r\n\r\n  document.getElementById(\'files\').addEventListener(\'change\', handleFileSelect, false);

\r\n

<input type="file" id="files" name="files[]" multiple />\r\n<output id="list"></output>

\r\n

\r\n

\r\n

\n\n

当您选择第一个文件上方的第二个文件时，它总是会更改顺序。
\n请检查图片

\n\n

\n我选择了第一张图片，名称是89......*

\n\n

\n当我从第一张图片中选择上面的第二张图片时，名称顺序发生了变化。FileList 也发生了变化。请帮助我获取用户选择的订单。谢谢。

\n\n

（我还尝试了从文件夹中随机选择的许多图像，但最终结果是自动排序的）

\n

Answer 1

您正在使用操作系统提供的文件选择器，这就是它在 Windows 中的工作方式。您无法更改其行为，并且在其他操作系统（Linux、MacOS）上可能会有所不同。如果该顺序对于您的目的至关重要，那么您可以实现自己的自定义控件，但这样您就失去了重用用户熟悉的方便的内置功能的好处。

另一种方法是允许用户在单击Open并且您处理了输入后自定义订单。这将使他们使用熟悉的界面，但可以选择，但可以灵活地控制顺序。如果您这样做，那么我建议首先按文件名对它们进行一致的排序，以便操作在操作系统之间保持一致。