【问题标题】:Dropzone images reorderingDropzone 图像重新排序
【发布时间】:2015-08-21 08:03:39
【问题描述】:

我使用 dropzone 通过拖放将多张图片上传到我的服务器。首先我选择我所有的图片,然后当我想上传时,我按下按钮,所有文件都被上传。

我想更改它们的上传顺序,我正在使用这个提示Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?,我可以通过鼠标拖动来更改顺序。

问题是,当我上传图片时,我没有按顺序上传图片,而是按照我最初将它们放在 dropzone 中的顺序上传。

我的 dropzone 是这样配置的

autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 3,
clickable: ".add",
previewsContainer: "#previews", 
maxFiles: 5,

【问题讨论】:

标签: javascript jquery jquery-ui-sortable dropzone.js


【解决方案1】:

Html 将如下所示:

<div id="imageUpload" class="dropzone mt-2"></div>

并在js中添加这段代码

$(".dropzone").sortable({
    items:'.dz-preview',
    cursor: 'grab',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {
      var queue = myDropzone.getAcceptedFiles();
      newQueue = [];
      $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {           
            var name = el.innerHTML;
            queue.forEach(function(file) {
                if (file.name === name) {
                    newQueue.push(file);
                }
            });
      });
      myDropzone.files = newQueue;
    }
});

希望这会奏效。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-01-23
    • 1970-01-01
    • 1970-01-01
    • 2015-10-16
    • 1970-01-01
    • 2016-03-13
    • 1970-01-01
    相关资源
    最近更新 更多