Question

我正在使用dropzone.js。我允许上传多个图像，并将缩略图显示为预览。我现在希望能够选择＆＃34;默认＆＃34;图像将始终显示为不同页面上的第一个图像。

我首先考虑使用＆＃34; addedfile＆＃34;使图像或图像下方的按钮可单击的事件。当点击图像或按钮时，我会保存图像的名称，其中dropzone保存在＆＃34; alt＆＃34;标记并将其写入隐藏的输入元素中，但如果有人上传了具有相同名称的2个图像，则会导致问题。所以我跳过了这个想法。

我的第二个解决方案是将dropzone与jQuery sortable（）结合起来。我的目标是上传一些图像，让我们说3.我在预览中看到了缩略图。第一个位置文件[0]上的图像将始终为＆＃34;默认＆＃34;图片。所以当我最后按下＆＃34; Save Post＆＃34;我可以设置标志＆＃34;默认＆＃34;对于第一个File [0]元素。返回预览...在sortable（）的帮助下，我可以移动图像，因此可以更改哪个图像应该在第一个位置，请参阅下面的代码。（代码在Dropzone设置之外）。图像是可排序的，因此有效。

但是，我现在如何调整HTML5文件对象以显示新位置？这是我被困的地方。是否可以重新排序文件对象或我有什么其他选项来完成我的任务？我的想法已经用完了，所以我希望我可以从sortable（）重新订购我的下面更新函数中的文件对象。

更新1：我还考虑过使用我自己的唯一名称重命名file.name，但发现这是不可能的，因为你只有＆＃34; read＆＃34;访问文件对象....

更新2：好的，经过一些研究后我想尝试访问HTML5文件对象。我认为这是第一步。我将id属性添加到隐藏文件元素中。我现在尝试访问文件元素，在我的更新函数中从sortable但是test：alert（files.length）;总是返回0.这里我做错了什么？

<script>
$(function() {
  $("#dropzonePreview").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#dropzonePreview',
        distance: 20,
        tolerance: 'pointer',
        update: function(e, ui){
             // Added below Code 

            // fileInput is an HTML input element: <input type="file" id="file" multiple>
            var fileInput = document.getElementById("file");

            // files is a FileList object (similar to NodeList)
            var files = fileInput.files;
            var file;
            alert (files.length);
            // loop trough files
            for (var i = 0; i < files.length; i++) {
                // get item
                file = files.item(i);
                //or
                file = files[i];

                alert(file.name);
            }

            },
  }); 
});
</script>

Dropzone.js如何使缩略图预览可排序并相应地更新File []？更新

0 个答案: