addRemoveLinks 在我的 Dropzone 上不起作用

Question

我查看了文档并在线尝试了几种方法，但 addRemoveLinks 方法不起作用。它显示“删除文件”，但不可点击，并且不会在 Javascript 控制台中引发错误消息。该视图来自 .NET MVC 4 项目，无论我如何设置 Dropzone，我都无法达到预期的效果。文件上传有效，但我希望用户能够在上传后或上传失败的情况下从 Dropzone 中删除缩略图/预览。

  <div class="jumbotron" style="margin-top: 4%">
       <div class="dropzone" id="dropzoneForm">
            <div class="fallback">
                   <input name="file" type="file" multiple />
                   <input type="submit" value="Upload" />
            </div>
      </div>
  </div>

<style type="text/css">

#dropzoneForm {
    background: #F0F0F0;
    border: 3px dotted #666;
    border-radius: 10px;
    width: 300px auto;
    height: 150px auto;
    padding-top: 35px;
    font-size: 14px;
    color: blue;
    vertical-align: middle;
    text-align: center;
}

.dz-file-preview {
    margin-top: -100px;
}

.dz-filename {
    font-size: 10px;
    color: blue;
    padding: 20px;
    margin-left: -25px;
    margin-bottom: 25px;
    word-wrap: normal;
}

.dz-processing {
    width: 400px;
}
</style>


<script>

Dropzone.options.dropzoneForm = {

    url: '@Url.Action("SaveUploadedFile", "Workflow")' + "?workflowInstanceID=" + '@Model.WorkflowInstanceID' + "&workflowID=" + '@Model.WorkflowID',
    paramName: "files",
    fileSizeBase: 1024,
    parallelUploads: 1,
    maxFiles: 25,
    maxFilesize: 10000,
    acceptedFiles: ".pdf, .bmp, .png, .jpg, .jpeg, .tiff, .gif, .png, .doc, .docx, .rtf, .xlsx, .xls, .doc, .docx, .txt, .3gp, .aac, .m4a, .mp3, .wav, .wma, .mp4, .avi, .mov, .3g2, .m4v, .mkv, .mpg, .m2v, .flac",
    createImageThumbnails: true,
    addRemoveLinks: true,

    dictDefaultMessage: "Drop File(s) Here or Click to Upload",

    queuecomplete: function () {     

    },

    init: function () {

        this.on("addedfile", function (file) {

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

            // Create the remove button
            var removeButton = Dropzone.createElement("<button data-dz-remove " +
                    "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>");

            // Listen to the click event
            removeButton.addEventListener("click", function (e) {
                // Make sure the button click doesn't submit the form:
                e.preventDefault();
                e.stopPropagation();

                // Remove the file preview.
                _this.removeFile(file);
                // If you want to the delete the file on the server as well,
                // you can do the AJAX request here.
            });

            // Add the button to the file preview element.
            file.previewElement.appendChild(removeButton);
        });


        this.on("complete", function (data) {
            var res = JSON.parse(data.xhr.responseText);

            if (this.getQueuedFiles().length == 0) {
                alert("File(s) were uploaded successfully.");

                $("#Grid").data("kendoGrid").dataSource.read(); //for Chrome
            }

        });

    }
};

Answer 1

在我的例子中，添加addRemoveLinks: true 选项确实显示了删除按钮，但不幸的是被dz-details 元素的填充覆盖，因此无法触发：

在这种情况下，只需在任何地方添加以下 css 就足够了：

.dz-details {
  padding: 0 !important;
}

Answer 2

在“addRemoveLinks: true”行之后添加：

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