Dropzone在初始化函数上添加ID并进行排序 [英] Dropzone add id on init function and sort

问题描述

我需要将现有图像的ID放入Dropzone预览中，并能够将排序顺序发送到后端

I need to get id of my existing images into dropzone preview and ability of sending sort order to backend

1. 获取现有图像
2. 对图像进行排序

我需要什么

1. 添加图像ID以进行预览
2. 将排序顺序发送到后端

代码

对代码的每一部分都加了注释，以更好地理解

Each part of the code is commented for better understanding

Dropzone.autoDiscover = false;
  var myDropzone = new Dropzone("#my-awesome-dropzone", {
    headers: {
      "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
    },
    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,
    url: '{{ url('admin/dropzoneStore') }}/'+encodeURI('{{$product->id}}'),
    dictRemoveFile: 'Remove',
    dictFileTooBig: 'Image is bigger than 8MB',

    // get uploaded images in dropzone box
    init: function() {
      myDropzone = this;
      // get current images
      const images = @json($images);
      $.each(images, function(index, value) {
        var mockFile = {name: value.name, size: value.size, id: value.id };
        myDropzone.options.addedfile.call(myDropzone, mockFile);
        myDropzone.options.thumbnail.call(myDropzone, mockFile, "/images/"+value.name);
        myDropzone.options.complete.call(myDropzone, mockFile);
        myDropzone.options.success.call(myDropzone, mockFile);
      });
    }
  });
  // remove files from both view and database
  myDropzone.on("removedfile", function(file,response) {
      $.ajax({
          url: '{{ url('admin/destroyOnEdit') }}/'+encodeURI(file.name),
          type: 'DELETE',
          dataType: "JSON",
          data: {
              "name": file.name,
              "_method": 'DELETE',
              "_token": "{{ csrf_token() }}",
          },
          success:function(data) {
            myDropzone.removeFile(file);
          }
      });
  });
  // sort images in preview (need to send this sort to back-end and update images "sort" column value)
  $(function() {
    $(".dropzone").sortable({
      items: '.dz-preview',
      cursor: 'move',
      opacity: 0.5,
      containment: '.dropzone',
      distance: 20,
      tolerance: 'pointer',
      stop: function(event, ui) {
        var cloned = $('div#botofform').clone()
        $('#botofform').html("")
        $('.dropzone .dz-complete').each(function() {
          var data_id = $(this).data('id')
          console.log('event', event)
          console.log('ui', ui)
          console.log('data_id', data_id)
          $(cloned).find("input[data-id=" + data_id + "]").clone().appendTo($('#botofform'))
        });
      }
    });
  });

有什么想法吗?

推荐答案

由于您的 id 是唯一的，因此您可以使用此ID来识别您的拖放区中的每个图像.因此，在 init 函数，只要您添加新图像，就可以使用 attr('data-id'，value.id)向每个预览div添加 data-id 并添加输入-底部div内的框.

As your id is unique you can use this id to identify each images in your dropzone .So, inside init function whenever you append new images you can add data-id to each preview div using attr('data-id', value.id) and append input-box inside your bottom div .

演示代码 :

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
  headers: {
    "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
  },
  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,
  //url: '{{ url('admin/dropzoneStore') }}/'+encodeURI('{{$product->id}}'),
  dictRemoveFile: 'Remove',
  dictFileTooBig: 'Image is bigger than 8MB',

  // get uploaded images in dropzone box
  init: function() {
    myDropzone = this;
    // get current images
    // const images = @json($images);

    var images = [{
      id: 103,
      img_alt: "svsss",
      name: "IMG_20201007_110637.jpg",
      sort: 0
    }, {
      id: 104,
      img_alt: "svsss1",
      name: "IMG_20201019_131338.jpg",
      sort: 1
    }, {
      id: 105,
      img_alt: "svsss3",
      name: "IMG_2020101_131339.jpg",
      sort: 2
    }, {
      id: 106,
      img_alt: "svsss4",
      name: "IMG_2020101_131340.jpg",
      sort: 3
    }]
    $.each(images, function(index, value) {
      var mockFile = {
        name: value.name,
        size: value.size,
        id: value.id
      };

      myDropzone.options.addedfile.call(myDropzone, mockFile);
      myDropzone.options.thumbnail.call(myDropzone, mockFile, "/images/" + value.name);
      myDropzone.options.complete.call(myDropzone, mockFile);
      myDropzone.options.success.call(myDropzone, mockFile);
      $(mockFile.previewElement).attr('data-id', value.id); //add data-id to preview div
      $('#botofform').append('<input type="text" class="cimages" name="cimages[]" data-id = "' + value.id + '" value="' + value.name + '" sort="' + value.sort + '">'); //append image value(name) and data-id(id) and sort(value as well)

    });
  }
});

$(function() {
  $(".dropzone").sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function(event, ui) {
      var cloned = $('div#botofform').clone()
      $('#botofform').html("")
      console.clear()
      $('.dropzone .dz-complete').each(function(i) {
        var data_id = $(this).data('id')
        console.log('data_id-- ' + data_id + " || sort --" + i)
        //find input change attr and then clone same...
        $(cloned).find("input[data-id=" + data_id + "]").attr("sort", i).clone().appendTo($('#botofform'))
      });
    }
  });
});

<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>

<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>

这篇关于Dropzone在初始化函数上添加ID并进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！