Question

我已经发现了如何让用户更改dropzone队列，但它只更改了文件的显示，我收到错误“Uncaught TypeError：queue.forEach不是函数”。我怎么能让它发挥作用？

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

        dd.files = newQueue;

    }
});

Answer 1

我正在寻找解决方案，我在这个CodePen项目中找到了确切的实现。 Link to the implementation (Dropzone.js + jQueryUI Sortable)

HTML

 <form action="/upload" class="dropzone" drop-zone="" id="file-dropzone"></form>
    <ul class="visualizacao sortable dropzone-previews" style="border:1px solid #000">

    </ul>
<div class="preview" style="display:none;">
  <li>
    <div>
    <div class="dz-preview dz-file-preview">
      <img data-dz-thumbnail />
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-success-mark"><span>✔</span></div>
    <div class="dz-error-mark"><span>✘</span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
  </div>
    </div>
  </li>  
</div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css');
.sortable {
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sortable li {
    float: left;
    width: 120px;
    height: 120px;
    overflow:hidden;
    border:1px solid red;  
    text-align: center;
    margin:5px;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}

JS

$(document).ready(function(){
 $('.sortable').sortable();

});

//DropzoneJS snippet - js
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.js',function(){
  // instantiate the uploader
  $('#file-dropzone').dropzone({ 
    url: "/upload",
    maxFilesize: 100,
    paramName: "uploadfile",
    maxThumbnailFilesize: 99999,
    previewsContainer: '.visualizacao', 
    previewTemplate : $('.preview').html(),
    init: function() {
      this.on('completemultiple', function(file, json) {
       $('.sortable').sortable('enable');
      });
      this.on('success', function(file, json) {
        alert('aa');
      });

      this.on('addedfile', function(file) {

      });

      this.on('drop', function(file) {
        console.log('File',file)
      }); 
    }
  });
});
$(document).ready(function() {});

Answer 2

花了很多时间之后，我终于有了一个解决方案，可以使用dropzone.js使jquery可排序。我将关注的脚本放在首位，然后将整个dropzone js脚本放在第二位。评论应该解释发生了什么。

首先，您需要此功能

//the function for replacing the array
    function newDropzoneArray(oldArray){
        // on the webpage search for all the images that have been uploaded
        var imageTags = $('#myDropzone').find('div.dz-image img');

        // the new array where we will put in the new files
        var current_queue = [];

        // iterate through all the images that have been uploaded by the user
        imageTags.each(function (index, imageTag) {
            // get the image name from the images
            imageName = imageTag.alt;

            // now we will iterate through the old array
            for (i = 0; i < oldArray.length; i++) {
                /** if the name of the image on the website is the same as the image from the old array
                 * we will add it to the new array. You can see this as sorting the array.
                 */
                if (imageName === oldArray[i].name) {
                    current_queue.push(oldArray[i]);
                }
            }
        });
        // now we return the new dropzone array so that we can replace it.
        return current_queue;
    }

然后在您的init中查找//！重要部分//

    init: function() {
    // very important to make the sortable work
    var myDropzone = this;

    // In your drop zone you have your click handler event
    document.getElementById("submit").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();

        //here we replace the array with the new one
        //! IMPORTANT PART IS HAPPENING HERE.
        myDropzone.files = newDropzoneArray(myDropzone.files);

        // dropzone will now submit the request
        e.stopPropagation();
        myDropzone.processQueue();
    });

如果您对完整的dropzone js脚本感兴趣：

$("#myDropzone").sortable({
    opacity: 0.7,
});

//the function for replacing the array
function newDropzoneArray(oldArray){
    // on the webpage search for all the images that have been uploaded
    var imageTags = $('#myDropzone').find('div.dz-image img');

    // the new array where we will put in the new files
    var current_queue = [];

    // iterate through all the images that have been uploaded by the user
    imageTags.each(function (index, imageTag) {
        // get the image name from the images
        imageName = imageTag.alt;

        // now we will iterate through the old array
        for (i = 0; i < oldArray.length; i++) {
            /** if the name of the image on the website is the same as the image from the old array
             * we will add it to the new array. You can see this as sorting the array.
             */
            if (imageName === oldArray[i].name) {
                current_queue.push(oldArray[i]);
            }
        }
    });
    // now we return the new dropzone array so that we can replace it.
    return current_queue;
}

Dropzone.options.myDropzone = {

// Configuration
url: '../somewhere',
method: 'post',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
// The setting up of the dropzone
init: function() {
    // very important to make the sortable work
    var myDropzone = this;

    // In your drop zone you have your click handler event
    document.getElementById("submit").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();

        //here we replace the array with the new one
        myDropzone.files = newDropzoneArray(myDropzone.files);

        // dropzone will now submit the request
        e.stopPropagation();
        myDropzone.processQueue();
    });
    this.on('completemultiple', function(file, json) {
    });

    this.on("sendingmultiple", function(data, xhr, formData) {
    // of the sending event because uploadMultiple is set to true.
        formData.append("name", jQuery("#name").val());
        formData.append("sample1", jQuery("#sample1").val());
    });
    this.on("successmultiple", function(files, response) {
        // redirecting user on success. No message atm.
        var url = document.location.origin + "/somewhere_to_redirect";
        window.location.replace(url);
    });
    this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
    });

}

}

Dropzone.js + Jquery UI可排序队列

2 个答案: