我查看了文档并尝试了多种在线方法,但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
}
});
}
};
答案 0 :(得分:5)
&#34; addRemoveLinks:true,&#34; line add in:
removedfile: function (file) {
var _ref;
return (_ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
},
答案 1 :(得分:0)