Javascript Dropzonejs度假酒店

我有dropzone box，并在其中实现了sortable。当我的表单使用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>

问题:

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

当dropzonejs删除图像时，如何减少

$（“#botofform”）

项（输入）

---

您可以对添加图像的

div

和

input

字段使用数据属性。因此，每当上载新文件时，您都可以使用

setAttribute（“数据id”，计数）

此处计数可以是任意随机数，请确保

input

和

div

的此值应相同，因为这将帮助我们删除和排序输入

现在，对于排序输入，您可以使用它，当排序停止时，它将被调用。在这里面，您可以循环通过

dropzone

div，然后获取我们前面添加的属性。使用此属性，我们可以找到输入并将其附加到

botofform

div

最后，对于删除文件，您可以使用event，每当单击

remove

链接时，就会调用该事件，因此您只需在此处获取添加到div的

数据id

，然后使用该属性来删除输入

演示代码：

var计数；
var随机；
Dropzone.autoDiscover=false；
var myDropzone=新的Dropzone（“我最棒的Dropzone”{
标题：{
“X-CSRF-TOKEN”：$（“meta[name='CSRF-TOKEN']”）attr（“内容”）
},
自动处理队列：false，
接受的文件：“.jpeg、.jpg、.png、.gif”，
dictDefaultMessage：“将图像拖到此处上载，或单击以选择一个”，
maxFiles:15，//最大文件数
最大文件大小：8，//MB
addRemoveLinks：是的，
dictRemoveFile:“删除”，
dictFileTooBig:'图像大于8MB'，
//追加隐藏的输入并添加选定的图像
接受：函数（文件）{
让fileReader=newFileReader（）；
fileReader.readAsDataURL（文件）；
fileReader.onloadend=函数（）{
random=1+Math.floor（Math.random（）*1000）；
计数=$（“.dz complete”）.length+“_”+随机数；
让content=fileReader.result；
console.log（计数）
//添加数据ID
$（“#botofform”）.append（“”）；
file.previewElement.classList.add（“dz成功”）；
file.previewElement.setAttribute（“数据id”，计数）；
}
file.previewElement.classList.add（“dz完成”）；
},
removedfile:函数（文件）{
console.log（“内部删除--”+file.previewElement.getAttribute（“数据id”））
var id=file.previewElement.getAttribute（“数据id”）//获取删除文件的属性
$（“#botofform输入[data id=“+ids+”]）。remove（）//同时删除输入字段
file.previewElement.remove（）；//删除文件
}
});
$（函数（）{
$（“.dropzone”）。可排序({
项目：“.dz预览”，
光标：“移动”，
不透明度：0.5，
安全壳：'.dropzone'，
距离：20，
公差：“指针”，
停止：功能（事件、用户界面）{
//克隆div
var clone=$（'div#botofform'）.clone（）
$（'#botofform'）.html（“”//将其清空
//在dropzone中循环。。
$（'.dropzone.dz complete'）。每个（函数（）{
var data_id=$（this）.data（'id'）//获取数据id
$（克隆）.find（“输入[data id=“+data_id+”]）.clone（）.appendTo（$（'#botofform'））//查找具有该数据id的输入，并将其附加到bottmform
});
}
});
});

//下降区箱
Hi，这是我的结果截图。我发现的另一个结果是：在div
botofform
中，所有输入都具有相同的id。您能为当前代码创建JSFIDLE吗？此外，展开div
dropzone
每个文件将有不同的div，查看是否有
数据id
不同，此
数据id
应与输入匹配，并且您是否运行了上述演示代码？它是否工作正常？好的，我正在制作JSFIDLE（不过基本上是您的代码）
关于ID的信息dropzone div中的所有信息都是正确的，但在
botofform
div中，所有输入信息都是相同的，在删除或排序时都不会更新。给你
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',
  });
});