重命名文件不會更改 dropzone.js 中的 filname

Question

我想防止從 dropzone 上傳重復文件我的 dropzone 只需要兩個文件，所以我想檢查第二個文件是否與第一個文件具有相同的文件名，如果有，請更改第二個文件名

我添加了一個 if 語句，用於檢查文件內容是否相等，如果條件為真，則不執行 if 語句

使用簡單版本，文件在發送到服務器時被重命名，但在 dropzone 內沒有被重命名

renameFile: function (file) {
  let filename =  file.name = "sdsdds.xlsx";
  return filename;

renameFile: function (file) {
  let name = file.name

  let div_children = $('.dz-filename').children();
  // get filename of already existing file
  if (div_children.eq(0).text() !== ""){
    if (div_children.eq(0).text() === div_children.eq(1).text() ) {
      console.log(file.name)
      let filename =  file.name = "sdsdds"
      return filename;
    }
  }
},

 document.addEventListener("DOMContentLoaded", function() { Dropzone.options.dropform = { maxFiles: 2, addRemoveLinks: true, maxFilesize: 2, parallelUploads: 1, // renameFile: function(file) { let name = file.upload.filename let div_children = $('.dz-filename').children(); // get filename of already existing file if (div_children.eq(0).text().== "") { if (div_children.eq(0).text() === div_children.eq(1).text()) { console,log(name) return name = "sdsdds" } } // }; }; });

 <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script> </head> <body> <form id="dropform" action="{{ url_for('receave_files') }}" class="dropzone"> </form> </body> </html>

Answer 1

首先， autoDiscover發現表單並啟動它。 這是在DOMContentLoaded之前發生的，因此您之后所做的一切都不會執行（您會注意到沒有任何選項會影響）。

其次，文檔可能不夠清楚，但文件上傳后可以訪問file.upload.filename 。 這用於識別實際名稱（ file.name ）和重命名后的新名稱（ file.upload.filename ）。
因此，您不應該使用file.upload.filename而是使用file.name 。

第三，我建議不要中繼 html 來找出其他文件名。 這不是合同，因此它可以改變並破壞您的應用程序。
相反，我建議手動啟動插件。 通過這種方式，您可以獲取 dropzone 實例並對其上傳文件進行查詢。

Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
  //..
  renameFile: function(file) {
    const { files } = myDropzone;
    const { name } = file;

    if (files.some(file => file.name === name)) {
      return name + Date.now();
    }
    return name;
  }
});

演示

 document.querySelector('button').addEventListener('click', () => { const names = myDropzone.files.map(({ upload }) => upload.filename).join(); alert(names); }); Dropzone.autoDiscover = false; const myDropzone = new Dropzone("#dropform", { url: "/", maxFiles: 2, addRemoveLinks: true, maxFilesize: 2, parallelUploads: 1, init: function() { this.on("addedfile", function(file) { file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename; }); }, renameFile: function(file) { const { files } = myDropzone; const { name } = file; if (files.some(file => file.name === name)) { return name + Date.now(); } return name; } });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.js"></script> <div id="dropform" class="dropzone"> </div> <br /> <button>alert files name</button>

https://jsbin.com/huvoyiw/edit?html,js,output

更新

為了也更新 ui，您可以監聽addedfile並相應地更新 DOM。 正如我所提到的，我對此感到非常滿意，因為 dropzone 可能會更改 DOM 並且功能會停止，但它確實可以完成工作。

init: function() {
  this.on("addedfile", function(file) {
    file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
  });
},

https://jsbin.com/qoxakod/edit?js,output

重命名文件不會更改 dropzone.js 中的 filname

問題描述

1 個解決方案

解決方案1
1 已采納 2020-12-20 17:26:19

重命名文件不會更改 dropzone.js 中的 filname

問題描述

1 個解決方案

解決方案1 1 已采納 2020-12-20 17:26:19

解決方案1
1 已采納 2020-12-20 17:26:19