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