Question

我正在使用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中没有图像时才能看到。我做错了什么？

Answer 1

您需要注册事件'removedfile'并对服务器上的'physicaly'删除文件进行服务器调用。

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
                      });
                    });
                }
}

Answer 2

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

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

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

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

这个问题非常令人困惑，2015年的问题尚未得到答复，而dropzone网站上的例子仍有这个问题......

Dropzone添加现有文件

2 个答案: