Javascript Dropzone在init函数上添加id并排序

我需要得到我的dropzone预览现有图像的id和发送排序顺序到后端的能力

我所拥有的

获取现有图像

对图像排序

我需要什么

添加要预览的图像ID

向后端发送排序命令

代码 为了更好地理解，代码的每一部分都会被注释

---

有什么想法吗？

由于您的

id

是唯一的，您可以使用此id来标识dropzone中的每个图像。因此，在

init

函数中，每当您附加新图像时，您都可以使用

attr（'data-id'，value.id）

将

数据id

添加到每个预览div中，并在底部div中附加输入框

演示代码：

Dropzone.autoDiscover=false；
var myDropzone=新的Dropzone（“我最棒的Dropzone”{
标题：{
“X-CSRF-TOKEN”：$（“meta[name='CSRF-TOKEN']”）attr（“内容”）
},
接受的文件：“.jpeg、.jpg、.png、.gif”，
dictDefaultMessage：“将图像拖到此处上载，或单击以选择一个”，
maxFiles:15，//最大文件数
最大文件大小：8，//MB
addRemoveLinks：是的，
//url:{{url（'admin/dropzoneStore'）}/'+encodeURI（{{$product->id}}'），
dictRemoveFile:“删除”，
dictFileTooBig:'图像大于8MB'，
//在dropzone框中获取上传的图像
init:function（）{
myDropzone=这个；
//获取当前图像
//const images=@json（$images）；
变量图像=[{
身份证号码：103，
img_alt:“svsss”，
名称：“IMG_20201007_110637.jpg”，
排序：0
}, {
id:104，
img_alt:“svsss1”，
名称：“IMG_20201019_131338.jpg”，
排序：1
}, {
id:105，
img_alt:“svsss3”，
名称：“IMG_2020101_131339.jpg”，
排序：2
}, {
id:106，
img_alt:“svsss4”，
名称：“IMG_2020101_131340.jpg”，
排序：3
}]
$.each（图像、函数（索引、值）{
var mockFile={
name:value.name，
大小：value.size，
id:value.id
};
调用（myDropzone，mockFile）；
调用（myDropzone，mockFile，“/images/”+value.name）；
myDropzone.options.complete.call（myDropzone，mockFile）；
myDropzone.options.success.call（myDropzone，mockFile）；
$（mockFile.previewElement.attr（'data-id'，value.id）；//将数据id添加到预览div
$（“#botofform”）.append（“”）；//追加图像值（名称）和数据id（id）以及排序（值）
});
}
});
$（函数（）{
$（“.dropzone”）。可排序({
项目：“.dz预览”，
光标：“移动”，
不透明度：0.5，
安全壳：'.dropzone'，
距离：20，
公差：“指针”，
停止：功能（事件、用户界面）{
var clone=$（'div#botofform'）.clone（）
$（'#botofform'）.html（“”）
控制台清除（）
$（'.dropzone.dz complete'）。每个（函数（i）{
var data_id=$（this.data（'id'））
log（'data_id--'+data_id+“| sort--”+i）
//查找输入更改属性，然后克隆相同的。。。
$（克隆）.find（“输入[data id=“+data_id+”]）.attr（“排序”，i）.clone（）.appendTo（$（'#botofform'））
});
}
});
});

Hi，你能显示
images
output吗？@Swati Hi在这里不显示
images
output，即：json结构：Doh:D等等……在这里非常感谢，这会添加id，但是
$（“.dropzone”）。可排序（{
？我如何发送图像顺序（位置）到后端？假设我将图像移动到第二位，并位于
$（“.dropzone”）。可排序（{
函数发送图像id加上图像的位置（即2）所以我可以更新图像排序列。你需要有
0,1..
order？或者用
id
你可以做什么？我需要两者，id，以便知道我应该更新哪个图像，位置号，以便知道我应该放什么值。所以它更像：
id:130，order:2
类似的东西我看到了，等等，我会用它更新t也是：）
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'))
        });
      }
    });
  });