web-dev-qa-db-ja.com

dropzoneプラグインにremovefileオプションを追加する方法は？

Dropzone.jsを使用しました（ http://www.dropzonejs.com/ ）。画像を削除するための削除ボタンを追加しようとしています。しかし、私はjavascriptの未定義エラーが発生しています

 <script>
  Dropzone.options.myDropzone = {
init: function() {
 addRemoveLinks: true,  
thisDropzone = this;
 $.get('photo-add.php', function(data) {
 $.each(data, function(key,value){
var mockFile = { name: value.name, size: value.size };
  thisDropzone.options.addedfile.call(thisDropzone, mockFile);
 thisDropzone.options.thumbnail.call(thisDropzone, mockFile,      "upload/"+value.name);

});
 });

 this.on("removedfile", function(file) {
alert(file.name);
console.log(file);
     // Create the remove button
  var removeButton = Dropzone.createElement("<button>Remove file</button>");

 /    / Capture the Dropzone instance as closure.
  var _this = this;

 // Listen to the click event
 removeButton.addEventListener();

   // Add the button to the file preview element.
  file.previewElement.appendChild(removeButton);
    });
  }
  };
     </script>
javascriptphpjquerymysql
8
markatte team

dropzoneを適切に設定していないと思います。

init: function() {
 addRemoveLinks: true,

上記のコードは無効です。

このように使用する

Dropzone.options.myAwesomeDropzone = {
  addRemoveLinks: true,
  init: function() {

  }

  ...

};

または、this.addRemoveLinks = trueのように使用することもできます

ファイルを削除するイベントを処理する場合は、次のように使用できます

removedfile: function(file) {
    x = confirm('Do you want to delete?');
    if(!x)  return false;
}

サーバー側でファイルの削除を処理します。

ドロップゾーンの成功メソッドでファイル名を配列にプッシュします。例：file_up_names=[];

 success:function(file){
   file_up_names.Push(file.name);

削除時に名前を取得し、ファイル削除のためにphpページに渡します。

 removedfile: function(file) {

    x = confirm('Do you want to delete?');
    if(!x)  return false;
    for(var i=0;i<file_up_names.length;++i){

      if(file_up_names[i]==file.name) {

        $.post('delete_file.php', 
             {file_name:file_up_names[i]},
           function(data,status){
             alert('file deleted');
             });
       }
    }
 }

サーバー側でファイル名を変更した場合は、そのファイル名を取り戻して削除する必要があることにも注意してください。

20
Tintu C Raju

以下のコードを試してください：

Dropzone.autoDiscover = false;
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list
var fileList = new Array;
var i = 0;
$("#dropzone").dropzone({
    addRemoveLinks: true,
    maxFiles: 10, //change limit as per your requirements
    dictMaxFilesExceeded: "Maximum upload limit reached",
    acceptedFiles: acceptedFileTypes,
    dictInvalidFileType: "upload only JPG/PNG",
    init: function () {

        // Hack: Add the dropzone class to the element
        $(this.element).addClass("dropzone");

        this.on("success", function (file, serverFileName) {
            fileList[i] = {
                "serverFileName": serverFileName,
                "fileName": file.name,
                "fileId": i
            };
            $('.dz-message').show();
            i += 1;
        });
        this.on("removedfile", function (file) {
            var rmvFile = "";
            for (var f = 0; f < fileList.length; f++) {
                if (fileList[f].fileName == file.name) {
                    rmvFile = fileList[f].serverFileName;
                }
            }

            if (rmvFile) {
                $.ajax({
                    url: path, //your php file path to remove specified image
                    type: "POST",
                    data: {
                        filenamenew: rmvFile,
                        type: 'delete',
                    },
                });
            }
        });

    }
});
3
Dhaval Bharadva

「すべてのイベント」など：成功-エラー-送信-removedfileまたはaddedfileなど.

http://www.dropzonejs.com/#event-list

init : function () {
    self.on('Every your events', function (file, response) {
        this.removeFile(file);
    }
}

この関数からファイルを削除するには、これを行うことができます：

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
2
Mahdi Bashirpour

私はこの同じ問題に出会いました。 Dhavalの答えが役立つと思いましたが、ドキュメントからよりクリーンな方法を見つけました。

ドキュメントから：

組み込みのaddRemoveLinks構成ではなく、特定のリンクでファイルを削除する場合は、data-dz-remove属性を使用してテンプレートに要素を挿入するだけです。例：

<img src="removebutton.png" alt="Click me to remove the file."
> data-dz-remove />

プレビューテンプレートのボタンでこの同じ属性をテストし、必要に応じて機能しました。

1
Greg Sipes

以下のコードを試してください：

Dropzone.autoDiscover = false;

  var dropzone = new Dropzone ("#mydropzone", {
    maxFilesize: 256, // Set the maximum file size to 256 MB
    paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
    autoProcessQueue: false,
    addRemoveLinks: true // Don't show remove links on dropzone itself.
  });

  dropzone.on("removedfile", function(file){
    alert('remove triggered');
  });

  dropzone.on("addedfile", function(file){
    alert('add triggered');
  });

  dropzone.on("success", function(file){
    alert('success triggered');
  });
0
gauravbhai daxini

サーバー側

uploadFile

ファイルを保存し、データベースにファイル情報を保存する場合は、データベーステーブルファイルIDをエコーするか、ディスクにのみファイルを保存する場合は、ファイルの新しい名前をエコーし​​ます。

removeFile

POST var $ _POST ["fid"]]または指定された名前のファイルを削除します。

Javascript JQuery

fileList = new Array();
$("#fm-dropzone").dropzone({
  url: siteurl, 
  addRemoveLinks: true, 
  dictRemoveFileConfirmation: "Are you sure you want to remove this File?",     
  success: function(file, serverFileName) {
             fileList[file.name] = {"fid" : serverFileName };
           },
  removedfile: function(file) {
            $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() {
                    file.previewElement.remove();
                }); 
           }
});
0
libnac