Dropzone，在預覽容器的開頭添加每個新文件

我使用dropzone處理文件上傳，並使用預覽容器指定上傳文件應顯示的位置。Dropzone，在預覽容器的開頭添加每個新文件

所以我的配置如下（僅相關部分左起）：

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

的問題是，在該容器中，我已經展示一些文件和新的文件在列表的末尾下載。我想要做的是在開始時添加它們。有沒有辦法做到這一點？

來源

2014-01-29 Salvador Dali

在您的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); 
     }

來源

2014-11-20 11:18:51 psigns

感謝您的回答。現在無法進行驗證，如果有人發現此功能正常工作 - 請給我一封信，以便我能接受答案。 –

@SalvadorDali此解決方案適用於我 – Farnabaz

你有兩個選擇，而無需修改庫的源代碼。

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選項和預覽刪除。

來源

2017-03-08 08:04:49

只是在前面加上預覽元素以懸浮窗

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

來源

2017-07-30 07:54:44

這是最好的解決方案，因爲它不需要對原始插件源代碼進行黑客入侵或重寫。你也可以這樣做，沒有像這樣的jQuery： 'this.previewsContainer.insertBefore（file.previewElement，this.previewsContainer.firstChild）;'。請注意，這不會改變文件上傳的隊列順序。 – Visualise

這應該是被接受的答案。 – Edrosos

Dropzone，在預覽容器的開頭添加每個新文件

回答

相關問題