Question

我正在使用dropzone处理文件上传，我正在使用预览容器来指定应该显示上传文件的位置。

所以我的配置如下（只剩下相关部分）：

var myDropzone = new Dropzone("#fileUploadHandler",{
    previewsContainer: '.filesList'
});

问题是在那个容器中我已经显示了一些文件，新文件被下载到列表的末尾。我想要做的是在开头添加它们。有没有办法实现这个目标？

Answer 1

只需将预览元素添加到dropzone

var dropzone = new Dropzone('#fileUploadHandler', {
    init: function () {
        this.on('addedfile', function (file) {  
           $('#fileUploadHandler').prepend($(file.previewElement));
        }
    }
});

Answer 2

在dropzone.js文件中，找到将文件预览添加到预览容器的代码。它应该是这样的：

if (this.previewsContainer) {
      file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
      file.previewTemplate = file.previewElement;
      this.previewsContainer.appendChild(file.previewElement);

将其更改为

if (this.previewsContainer) {
      file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
      file.previewTemplate = file.previewElement;
      // check to see if there is already a child element in the preview container
      var previewFirstChild = this.previewsContainer.firstChild;
      if (previewFirstChild) {
        // if so, add the new file preview in front of the first child
        this.previewsContainer.insertBefore(file.previewElement, previewFirstChild);
      } else {
        // otherwise just append it 
        this.previewsContainer.appendChild(file.previewElement);
      }

Answer 3

创建您的dropzone实例

var myDropzone = new Dropzone("#fileUploadHandler",{
  previewsContainer: '.filesList'
});

然后使用添加文件事件以前置而不是附加的方式修改预览。

myDropzone.on("addedfile", function(file)
{
  jQuery('.filesList').prepend(jQuery(file.previewElement));
}

Answer 4

您有两个选项，无需修改库源代码。

1）禁用previewsContainer并处理 addedFile 事件中的预览元素：

var dropzone = new Dropzone('#fileUploadHandler', {
    previewsContainer: false,
    init: function () {
        this.on('addedfile', function (file) {
            file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());

            var previews = document.getElementById('#previews');
            previews.insertBefore(file.previewElement, previews.firstChild);
        }
    }
});

2）覆盖 addedfile 选项：

var dropzone = new Dropzone('#fileUploadHandler', {
    previewsContainer: '.filesList',
    addedfile: function (file) {
        file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());

        this.previewsContainer.insertBefore(file.previewElement, this.previewsContainer.firstChild);

        return false;
    }
});

注意：使用其中一个建议时，您必须自己处理某些功能，例如 addRemoveLinks 选项和预览删除。

Dropzone，在预览容器的开头添加每个新文件

4 个答案: