knockout.js - Dropzone 添加现有文件

Question

我正在使用带有 knockout 的 dropzone。我想将现有文件添加到 dropzone。我的 dropzone 自定义绑定(bind)代码是(仅查看添加现有文件的代码，因为添加新文件工作正常):

ko.bindingHandlers.dropzone = {
            init: function (element, valueAccessor) {
                var value = ko.unwrap(valueAccessor());

                var options = {
                    maxFileSize: 15,
                    uploadMultiple: true,
                    parallelUploads: 100,
                    maxFiles: 30,
                    addRemoveLinks: true,
                    acceptedFiles: ".jpeg,.jpg,.png,.gif",
                    init: function () {
                        var myDropzone = this;
                        this.on("success", function (file, serverFileName) {
                            fileList = [];
                            i = 1;
                            var abc = $.map(serverFileName, function (item) { return (item); });
                            $.each(abc, function (index, value) {
                                fileList[i] = { "fileName": value, "fileId": i++ };
                            })
                        });
                        if (images) {
                            for (i = 0; i < images.length; i++) { //data in images array is shown in figure
                                myDropzone.emit("addedfile", images[i]);
                                myDropzone.emit("thumbnail", images[i], "/Images/Ads/");
                                myDropzone.emit("complete", images[i]);
                            }
                        }
                    }
                };

                $.extend(options, value);

                $(element).addClass('dropzone');
                new Dropzone(element, options); 
            }
        };

images中的数据数组是:



我的 HTML 代码是:

<form id="my-awesome-dropzone" data-bind="dropzone: { url: '/Electronics/FileUploadHandler' }"method="post" enctype="multipart/form-data">
   <h2>Add Images</h2>
   <div id="dropzonePreview" class="dz-default dz-message"> </div>
</form>

现在添加的现有图像如图所示。


为什么不显示图像的缩略图？当我将鼠标悬停在“删除文件”上时，浏览器左下方显示的链接是 javascript:undefined; .当我单击“删除文件”时，文件被删除，但显示“删除要上传的图像”，只有在 dropzone 中没有图像时才可见。我做错了什么？

Answer 1

我只能回答问题的一部分:

And when I click "Remove file" the file is removed but "Drop images to upload" is shown which should only be visible when there are no images in dropzone. What i am doing wrong?

发现在您发出事件以将现有文件添加到 dropzone 后，您需要向 files 数组添加条目(dropzone 检查该数组中的条目数，如果为零 - 显示“Drop images to upload”消息:

myDropzone.emit("addedfile", images[i]);
myDropzone.emit("thumbnail", images[i], "/Images/Ads/");
myDropzone.emit("complete", images[i]);
myDropzone.files.push(images[i]); // added this line

2015年的这个问题没有答案，这非常令人困惑，dropzone网站上的示例仍然存在这个问题......