Dropzone 添加现有文件答案

【问题标题】：Dropzone add existing filesDropzone 添加现有文件
【发布时间】：2016-02-16 11:24:02
【问题描述】：

我正在使用带有淘汰赛的 dropzone。我想将现有文件添加到 dropzone。我的 dropzone 自定义绑定代码是（仅查看添加现有文件的代码，因为添加新文件工作正常）：

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 中没有图像时才可见。我做错了什么？

【问题讨论】：

这一切都取决于你如何配置你的模拟文件！

标签： knockout.js dropzone.js

【解决方案1】：

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

当我单击“删除文件”时，文件被删除，但显示“删除要上传的图像”，只有在 dropzone 中没有图像时才可见。我做错了什么？

发现在您发出事件以将现有文件添加到 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 网站上的示例仍然存在这个问题...

【讨论】：

谢谢，这让我走上了正轨！另一个怪癖是您需要在以这种方式添加的每个文件上设置accepted: true（可能还有status: 'success'）。否则，Dropzone 不会根据您可能设置的任何最大文件限制来计算现有文件。就我而言，我有一个文件的限制，所以如果一个文件已经存在，用户不应该能够添加另一个文件。如果不设置accepted: true，Dropzone 将允许再添加一个文件。官方示例说手动调整 maxFiles 设置，但保持原样并使用标准逻辑对我来说感觉更干净！

【解决方案2】：

您需要注册事件“removedfile”并执行服务器调用以“物理”删除服务器上的文件。

var options = {
                ...
                init: function () {
                    var myDropzone = this;
                    ...
                    // Register removedfile event
                    myDropzone.on("removedfile", function (file) {
                      // Ajax call to your server for remove a file
                      $.ajax({
                        url : 'your/del/file/url',
                        data : {paramName : file.name}
                      }).done({
                        // Remove successfully
                      });
                    });
                }
}

【讨论】：