Dropzone 排序数组发送到 ajax 个文件

Question

我正在尝试将新排序的有序数组发送到我的 ajax 文件中。

我正在使用 JQUERY UI 对排序后的顺序进行排序我想将排序后的数组放入我的 auction.ajax.php 文件.

你看我也试过准备一个数组。我需要将重新排序的文件名数组发送到 ajax 页面。

<script>
  $(document).ready(function(e) {
    var imageNames = [];

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

      });

      $("#myDrop").disableSelection();
    });

    //Dropzone script
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#myDrop", {
      paramName: "files", // The name that will be used to transfer the file
      addRemoveLinks: true,
      uploadMultiple: true,
      autoProcessQueue: false,
      parallelUploads: 50,
      maxFilesize: 2, // MB
      acceptedFiles: ".png, .jpeg, .jpg, .gif",
      url: "ajax/actions.ajax.php",

    });

/*Ans code*/
    myDropzone.on("sending", function(file, xhr, formData) {
      var filenames = [];

      $('.dz-preview .dz-filename').each(function() {
        filenames.push($(this).find('span').text());
      });

      formData.append('filenames', filenames);
    });

    /* Add Files Script*/
    myDropzone.on("success", function(file, message) {
      $("#msg").html(message);
      //setTimeout(function(){window.location.href="index.php"},800);
    });

    myDropzone.on("error", function(data) {
      $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
    });

    myDropzone.on("complete", function(file) {
      //myDropzone.removeFile(file);
    });

    $("#add_file").on("click", function() {
      myDropzone.processQueue();
    });
  });
</script>
<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>
<input type="text" name="sortingOrder" id="sortingOrder" value="">
<button id="add_file">Add</button>

Answer 1

一种方法是使用 sending 事件。此事件接收 formData 作为参数，因此您可以修改它，并将您的数据发送到服务器。

myDropzone.on("sending", function(file, xhr, formData) {
  var filenames = [];

  $('.dz-preview .dz-filename').each(function() {
    filenames.push($(this).find('span').text());
  });

  formData.append('filenames', filenames);
});

现在每个调用都将包含一个参数 filenames，并将包含放置区中所有文件的排序名称。

请看这个working plunker。虽然没有应用任何样式，但您可以在单击添加按钮时在控制台中看到文件名。

Dropzone 排序数组发送到 ajax 个文件

Dropzone sorted array send to ajax files

arrays

sorting

jquery

dropzone.js