时间戳

首页 > 解决方案 > Dropzonejs度假村附加图像

javascript - Dropzonejs度假村附加图像

问题描述

我有 dropzone 框，并且我已经在其中实现了可排序。当我的表单使用 html 而不是 ajax 提交时，我必须添加隐藏输入，在其中使用 dropzonejs 推送我选择的图像，因此我可以将它们放在后端。

到目前为止，我上面解释的一切都在工作

问题

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

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

代码

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',
  });
});

问题

  1. 如何将可排序的结果应用到附加的输入中？
  2. $('#botofform')当图像被 dropzonejs 删除时，如何减少项目（输入）？

标签： javascriptjquerydropzone.js

解决方案

您可以对添加图像的位置和字段使用数据属性。因此，无论何时上传新文件，您都可以在此处使用count可以是任何随机数，仅确保此值对于两者应相同，因为这将帮助我们删除和排序输入。divinputsetAttribute("data-id", count)inputdiv

现在，对于输入的排序，您可以使用停止事件，当排序停止时，该事件将被调用。在此内部，您可以循环遍历dropzonediv，然后获取我们之前使用此属性添加的属性，我们可以找到输入并将其附加到botofformdiv。

最后，要删除文件，您可以使用删除文件事件，只要单击链接，就会调用此事件remove，因此您只需获取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>

推荐阅读