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：真正的” 行添加在：

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