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

2024-04-23

如果用户选择多个文件,则需要按用户选择优先级排序(如facebook)。 FileList 需要取决于用户顺序。

这是示例代码:

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

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

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

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

enter image description here I selected the first image , which name is 89......*

enter image description here When I selected the second image above from first image , the name order changed . And also FileList changed. Please help me to get the order as user selected . Thanks.

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


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐