选择后对输入文件进行排序答案

【问题标题】：Sort input files after selection选择后对输入文件进行排序
【发布时间】：2014-07-23 23:55:01
【问题描述】：

我有什么方法可以使用任何客户端解决方案对文件进行排序以 POST 到服务器？

更具体地说，我使用以下标签<input type="file" name="Myfiles[]" multiple> 来选择一些图像。

在最后的代码中，我显示了图像的预览，并使用 jQuery UI 可排序，我能够更改元素的位置。

那么，当我将数据发布到服务器时，如何按排序顺序插入文件？这就是我被卡住的地方

    for(var i = 0; i< this.files.length; i++)
     {
            var file = this.files[i];
            if(!file.type.match(‘image’))
                continue;
            var picReader = new FileReader();
            picReader.addEventListener('load',function(event){
                var picFile = event.target;
                $('#sortable').append('<li><img height="100" width="100" src="'+picFile.result+'" /></li>');
            });
            picReader.readAsDataURL(file);
    }

【问题讨论】：

你需要更清楚。您没有显示 POST 操作，也没有显示您收到发布文件的位置。
您可以强制索引进入 Myfiles 数组。 AngularJS 示例：Myfiles[{{ index }}]
@AbraCadaver Post 操作并不重要，处理来自输入文件的数据数组是一个单一的操作，它们按照在 onchange 事件期间被选择的顺序插入，而不是最终的顺序预览。

标签： javascript php jquery file-upload jquery-ui-sortable

【解决方案1】：

假设您将文件存储到数组中：

var storedFiles = [];

您可以创建一个隐藏字段以按您想要的顺序存储图像的 ID（3、1、2、4..）这些 ID 必须在您选择图像后生成。

然后当点击上传按钮时，抓取隐藏输入字段的排序内容并运行for循环以重新处理文件的顺序。

var data = new FormData();
var items_array = $('.cvf_hidden_field').val();
var items = items_array.split(',');

for (var i in items){
    var item_number = items[i];
    data.append('files' + i, storedFiles[item_number]);
}

然后将排序后的文件追加到变量数据中，然后使用AJAX发送：

$.ajax({
    url: 'upload.php',
    type: 'POST',
    contentType: false,
    data: data,
    processData: false,
    cache: false,
    success: function(response, textStatus, jqXHR) {}
});

【讨论】：

【解决方案2】：

服务器接收文件的顺序将是它们被放置在要提交给服务器的表单中的顺序。

这意味着在提交之前在客户端重新排序它们可能更容易，例如通过重新排序它们在提交表单中出现的顺序。这是您可以使用的粗略和准备好的sn-p：

   var newOrder = [];
   for(var i = 0; i< this.files.length; i++){
              var indiv_file = this.files[a];

              // processing to calculate desired array position for submission         
              idealPos = function_returning_new_array_position(indiv_file);
              newOrder[idealPos] = this.files[a];


   }

因此重新排序您的“this.files”数组以反映您选择的顺序。并在提交文件时使用表单中的 newOrder 数组。我无法完全弄清楚您在上面的代码中在做什么，但是除非您的用户期望他们的图像被重新排序，否则看到他们计划提交的文件跳来跳去可能会有点迷失方向。

【讨论】：

【解决方案3】：

您可以使用纯 JavaScript 代码使用文件名对文件进行排序并将它们存储为数组。

var files = evt.target.files

var RESULT = []
var m = files.length
for (var a = 0; a < m; a++) {
    var min = 0
    for (var b = 0; b < (m - 1) - a; b++) {
        if ((files[b].name).localeCompare(files[b + 1].name) == 1) {
            min = b + 1
        }
    }
    RESULT[a] = files[min]
    delete files[min]
}

以上代码将上传的文件按照文件名升序排序，并存储在RESULT中。

【讨论】：