Question

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

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

使用最后的代码我显示图像的预览，并使用jQuery UI sortable我能够改变元素的位置。

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

    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);
    }

Answer 1

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

这意味着在提交之前，可能更容易在客户端重新订购它们。通过重新排序它们出现在提交表单中的顺序。下面是你可以使用的粗略和准备好的片段：

   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数组。我无法弄清楚你在上面的代码中做了什么，但除非你的用户期望他们的图像被重新排序，否则看起来他们计划提交的文件跳转可能会有点迷惑。

Answer 2

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

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) {}
});

Answer 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中。

选择后对输入文件排序

3 个答案: