Dropzone添加现有文件

Question

我正在使用dropzone与淘汰赛。我想将现有文件添加到dropzone。我的悬浮窗自定义绑定代码（仅看到代码到现有的文件添加添加新的文件工作正常）：在images阵列

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

的数据是：

而我的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 
         }); 
        }); 
       } 
}