Dropzone排序数组发送到ajax文件

时间:2017-07-18 04:15:11

标签: jquery arrays sorting dropzone.js

我正在尝试将新排序的有序数组发送到我的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>

1 个答案:

答案 0 :(得分: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,并且将包含dropzone中所有文件的已排序名称。

请参阅此working plunker。虽然没有应用样式,但是当您单击添加按钮时,您可以在控制台中看到文件的名称。