web-dev-qa-db-ja.com

dropzone.jsからファイルをアップロードおよび削除する方法

以下のコードを使用しましたが、画像は削除されましたが、サムネイル画像は表示されたままです。

 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); 
    });
  }
javascriptphpjquerydropzone.js
52
Aaru

サムネイルを削除するには、addRemoveLinks：trueを有効にし、dropzonejsで「removedfile」オプションを使用する必要があります

removedfile：リストからファイルが削除されるたびに呼び出されます。これを聞いて、必要に応じてサーバーからファイルを削除できます。

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;        
              }

それは私の側で機能するので、役立つことを願っています。

93
6opko

上記のベストアンサーに加えて、スペースを削除してダッシュに置き換え、小文字に変換するには、このjsをdropzone.jsファイルに適用します。

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

ファイル名の処理について-dropzone.jsファイルと上記のajax呼び出しを編集しました。このように、クライアントはファイル名を処理し、自動的にphp/server側に送信されるので、そこでやり直す必要はなく、その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">）サーバー側のエラー処理/削除を使用して、ユーザーにメッセージをポストバックできるようにします。

dropzone.phpで：

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

これは、私の側で動作するコードを使用した拡張です。 dropzone.html/dropzone.php/dropzone.jsの3つのファイルがあります

明らかに、コードを繰り返す代わりにjs関数を作成しますが、名前が変わるので私に適しています。ファイル名スペース/文字/などを処理するために、自分でjs関数の変数を渡すことができます。

0
Fstarocka Burns