服务器加载文件中的Dropzone.js可排序文件

Question

当我尝试对服务器加载的文件进行排序时使用dropzone js会收到以下错误

未捕获到的TypeError：无法在“ FileReader”上执行“ readAsDataURL”：参数1的类型不是“ Blob”。 在Dropzone.createThumbnail ...在Dropzone._processThumbnailQueue

我相信该错误与将不正确的mockFile变量推入dropzone文件有关吗？ 作为对象而不是模拟流程需要的File对象？

以下是我目前正在使用的代码

  function getFiles() {  
   $.getJSON('/listing/attachments/'+$('input[name="listing"]').val(), 
    function(data) {
        if ( data ) {
          $.each(data, function(i, item) {
            var mockFile = { 
              name: item.name,
              size: 23233,
              status: 'success',
              type: 'image/jpeg'
            };
            dropzone.emit("addedfile", mockFile);
            dropzone.emit("thumbnail", mockFile, item.file);
            dropzone.emit("complete", mockFile);
            dropzone.files.push(mockFile);
          });
        }
      });
    }

    var dropzone = new Dropzone(".dropzone", {
        uploadMultiple: false,
        parallelUploads: 100,
        maxFilesize: 8,
        maxFiles: 20,
        addRemoveLinks: true,
        acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
        init:function() {
          var self = this;
          this.on("removedfile", function(file) {
              $.ajax({
                  type: 'POST',
                  url: '/upload/delete',
                  data: {id: file.name, listing: $('input[name="listing"]').val(), _token: $('input[name="_token"]').val()},
                  dataType: 'html',
                  success: function(data){
                      var rep = JSON.parse(data);
                      if(rep.code == 200) {

                      }
                  }
              });
          } );
          if ( $('input[name="listing"]').val() ) {
           getFiles(); 
          }
        },
    });

    $(function(){
      $(".dropzone").sortable({
          items:'.dz-preview',
          cursor: 'move',
          opacity: 0.5,
          containment: '.dropzone',
          distance: 20,
          tolerance: 'pointer',
          update: function(e, ui){

            var files = dropzone.files;

            files.sort(function(a, b){
                return ($(a.previewElement).index() > $(b.previewElement).index()) ? 1 : -1;
            })

            dropzone.removeAllFiles();
            dropzone.handleFiles(files);
            dropzone.processQueue();
          }
      });
    });

提前谢谢了 ：）

Answer 1

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

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

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

        // the array we want to upgrade
        var oldArray = myDropzone.files;

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

        // 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
            var i;
            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]);
                }
            }
        });

        /** after everything is done we will update the old array with the
         *  new array so it knows that the files have been sorted.
         */
        myDropzone.files = current_queue;

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

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

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

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

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

        // the array we want to upgrade
        var oldArray = myDropzone.files;

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

        // 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
            var i;
            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]);
                }
            }
        });

        /** after everything is done we will update the old array with the
         *  new array so it knows that the files have been sorted.
         */
        myDropzone.files = current_queue;

        // dropzone will now submit the request
        e.stopPropagation();
        myDropzone.processQueue();
    });
    this.on('completemultiple', function(file, json) {
    });
    // sendingmultiple event
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function(data, xhr, formData) {
        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
    });

}

}