Dropzonejs 度假村附加图像

Question

我有 dropzone 框，我已经在其中实现了 sortable。由于我的表单使用 html 而不是 ajax 提交，因此我必须添加隐藏输入，在其中我使用 dropzonejs 推送我选择的图像，因此我可以在后端获取它们。

到目前为止我上面解释的一切都有效

问题

正如我提到的，我已经在 dropzonejs 中实现了可排序功能，它确实在 dropzone 框中对图像进行排序，但在我附加的隐藏输入中没有[=39] =]

为了在后端获得排序图像，我还需要将该排序应用到我的附加输入中。

代码

HTML

//Drop zone box <div class="dropzone" id="my-awesome-dropzone" action="#"> <div class="fallback"> <input name="cimages[]" type="file" multiple /> </div> <div class="clearfix"></div> </div> // append hidden input include selected images for back-end use <div id="botofform"></div>

Script

Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#my-awesome-dropzone", { headers: { "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content") }, autoProcessQueue : false, acceptedFiles: ".jpeg,.jpg,.png,.gif", dictDefaultMessage: "Drag an image here to upload, or click to select one", maxFiles: 15, // Maximum Number of Files maxFilesize: 8, // MB addRemoveLinks: true, dictRemoveFile: 'Remove', dictFileTooBig: 'Image is bigger than 8MB', // append hidden input and add selected images accept: function(file) { let fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onloadend = function() { let content = fileReader.result; $('#botofform').append('<input type="hidden" class="cimages" name="cimages[]" value="'+ content +'">'); file.previewElement.classList.add("dz-success"); } file.previewElement.classList.add("dz-complete"); } }); // reorder images in dropzone box (need to get this results into "$('#botofform').append" above) $(function(){ $(".dropzone").sortable({ items:'.dz-preview', cursor: 'move', opacity: 0.5, containment: '.dropzone', distance: 20, tolerance: 'pointer', }); });

问题

如何将可排序结果应用到附加输入中？

当图像被 dropzonejs 删除时，如何减少 $('#botofform') 项（输入）？

Answer 1

您可以对添加图像的 div 和 input 字段使用 data-attribute。因此，无论何时上传新文件，您都可以在此处使用 setAttribute("data-id", count) count 可以是任何随机数，只确保此值对于 input 和 div 应该相同，因为这将帮助我们删除和排序输入 .

现在，为了对输入进行排序，您可以使用 stop event 当排序停止时将调用它。在其中您可以遍历 dropzone div 然后获取我们拥有的属性之前使用此属性添加我们可以找到输入并将其附加到 botofform div.

最后，要删除文件，您可以使用 remove files 事件，只要单击 remove link 就会调用此事件，所以在这里您只需要获取 data-id 即可添加到 div 然后使用此属性也删除输入。

演示代码 :

var count;
var random;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
  headers: {
    "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
  },
  autoProcessQueue: false,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
  dictDefaultMessage: "Drag an image here to upload, or click to select one",
  maxFiles: 15, // Maximum Number of Files
  maxFilesize: 8, // MB
  addRemoveLinks: true,
  dictRemoveFile: 'Remove',
  dictFileTooBig: 'Image is bigger than 8MB',

  // append hidden input and add selected images
  accept: function(file) {

    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function() {
      random = 1 + Math.floor(Math.random() * 1000);
      count = $(".dz-complete").length + "_" + random;
      let content = fileReader.result;
      console.log(count)
      //add dataid
      $('#botofform').append('<input type="text" class="cimages" name="cimages[]" data-id = "' + count + '" value="' + content + '">');

      file.previewElement.classList.add("dz-success");
      file.previewElement.setAttribute("data-id", count);

    }

    file.previewElement.classList.add("dz-complete");

  },
  removedfile: function(file) {
    console.log("inside remove --" + file.previewElement.getAttribute("data-id"))
    var ids = file.previewElement.getAttribute("data-id") // get attr where file is been removed 
    $("#botofform input[data-id=" + ids + "]").remove() //remove input field as well
    file.previewElement.remove(); //remove file


  }
});

$(function() {
  $(".dropzone").sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function(event, ui) {
      //cloned div
      var cloned = $('div#botofform').clone()
      $('#botofform').html("") //empty it
      //loop through dropzone..
      $('.dropzone .dz-complete').each(function() {
        var data_id = $(this).data('id') //get data-id
        $(cloned).find("input[data-id=" + data_id + "]").clone().appendTo($('#botofform')) //find input which has that data-id and append same to bottmform
      });


    }

  });
});

<link rel="stylesheet" href=" http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//Drop zone box
<div class="dropzone" id="my-awesome-dropzone" action="#">
  <div class="fallback">
    <input name="cimages[]" type="file" multiple />
  </div>
  <div class="clearfix"></div>
</div>
<div id="botofform"></div>

Dropzonejs 度假村附加图像

Dropzonejs resort appended images

javascript

jquery

dropzone.js

问题

代码

问题