如何從 dropzone.js 上傳和刪除文件

Question

我使用了下面的代碼，圖像已被刪除，但縮略圖仍然顯示。

 Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, response) {
      file.serverId = response; 

    });
    this.on("removedfile", function(file) {
      if (!file.serverId) { return; }
      $.post("delete-file.php?id=" + file.serverId); 
    });
  }

Answer 1

要刪除縮略圖，您必須啟用 addRemoveLinks: true，並在 dropzonejs 中使用“removedfile”選項

removefile：每當從列表中刪除文件時調用。 如果您願意，您可以收聽此內容並從您的服務器中刪除該文件。

addRemoveLinks: true,
removedfile: function(file) {
    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  }

我還添加了一個刪除腳本的ajax調用，它看起來像這樣：

addRemoveLinks: true,
removedfile: function(file) {
    var name = file.name;        
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: "id="+name,
        dataType: 'html'
    });
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
              }

它對我有用，所以我希望它有所幫助。

Answer 2

除了上面的最佳答案 - 要刪除空格並替換為破折號並轉換為小寫，請在 dropzone.js 文件中應用此 js：

name = name.replace(/\s+/g, '-').toLowerCase(); 

對於文件名處理 - 我編輯了dropzone.js文件和上面的 ajax 調用。 這樣，客戶端處理文件命名，並自動發送到 PHP/服務器端，所以你不必在那里重做，而且它的 URL 幾乎是安全的。

在某些情況下，js 會根據函數/命名發生變化：

dropzone.js - 第 293 行（大約）：

node = _ref[_i];
node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase());

dropzone.js - 第 746 行（大約）：

Dropzone.prototype._renameFilename = function(name) {
  if (typeof this.options.renameFilename !== "function") {
    return name.replace(/\s+/g, '-').toLowerCase();
  }
  return this.options.renameFilename(name.replace(/\s+/g, '-').toLowerCase());
};

我將整個removedFile部分移動到dropzone.js的頂部，如下所示：

autoQueue: true,
addRemoveLinks: true,
      
removedfile: function(file) {
    var name = file.name;    
    name =name.replace(/\s+/g, '-').toLowerCase();    /*only spaces*/
    $.ajax({
        type: 'POST',
        url: 'dropzone.php',
        data: "id=" + name,
        dataType: 'html',
        success: function(data) {
            $("#msg").html(data);
        }
    });

    var _ref;
    if (file.previewElement) {
        if ((_ref = file.previewElement) != null) {
            _ref.parentNode.removeChild(file.previewElement);
        }
    }
    return this._updateMaxFilesReachedClass();
},
previewsContainer: null,
hiddenInputContainer: "body",

注意我還在 html 中添加了一個消息框：（ div id="msg"></div> ）在 HTML 中，這將允許服務器端錯誤處理/刪除也將消息發回給用戶。

在 dropzone.php 中：

if (isset($_POST['id']) {
    //delete/unlink file 
    echo $_POST['id'] . ' deleted'; // send msg back to user
}

這只是我這邊工作代碼的擴展。 我有 3 個文件，dropzone.html、dropzone.php、dropzone.js

顯然，您將創建一個 js 函數而不是重復代碼，但由於命名更改，它適合我。 您可以自己在 js 函數中傳遞變量來處理文件名空間/字符/等。