如何增加kenoui上傳控件

Question

唯一類型documentation我能找到引用爲「落區」是

localization.dropFilesHere String(default: "drop files here to upload") Sets the drop zone hint.

現在我怎麼可以設置懸浮窗像Blueimp整個頁面懸浮窗？

Answer 1

使用當前版本的Kendo UI Uploader，不可能增加dropzone的大小。

可能的備選方案：

創建圍繞您的網頁，只要文件在此投下了DIV的div創建列表像被丟棄的文件filesToUpload，然後這個列表分配給劍道上傳的文件選項。

  files: filesToUpload, 

步，以獲取被丟棄的文件：

停止在懸浮窗格

$("#yourDropzoneDiv").on("dragover", function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 

    $("#yourDropzoneDiv").on("dragleave", function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 

    $("#yourDropzoneDiv").on("drop", function (e) { 

     e.preventDefault(); 
     e.stopPropagation(); 

     var filesToUpload = []; 

      for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) { 
       var objDroppedFiles = {}; 
       objDroppedFiles['name'] = e.originalEvent.dataTransfer.files[i].name 
       objDroppedFiles['size'] = e.originalEvent.dataTransfer.files[i].size 
       objDroppedFiles['extension'] = e.originalEvent.dataTransfer.files[i].type.split('/')[1] 
       filesToUpload.push(objDroppedFiles);   
      } 


    $("#droppedUploader").kendoUpload({ 
        multiple: true, 
        async: { 
         saveUrl: "Upload.aspx", 
         autoUpload: true 
        }, 
        files: filesToUpload, 
        upload: fileUploadDropped, 
        template: kendo.template($('#droppedFileTemplate').html()) 
       }); 
    } 

這樣，你就可以看到被丟棄的文件放置事件的默認行爲的劍道上傳。

Answer 2

爲什麼不重寫默認的dropzone大小？您可以使用基本的CSS增加大小。

var $dropzone = $("div.k-dropzone"); 
$dropzone.css("height", "mycustomHeight"); 
$dropzone.css("width", "mycustomWidth"); 

祝你好運。

Answer 3

這應該委託從「largedroparea」下降事件劍道上傳

<div id="largedroparea"></div> 
<input type="file" name="files" id="photos" /> 

<script> 
    $("#photos").kendoUpload({ 
     async: { 
      saveUrl: "save", 
      removeUrl: "remove" 
     } 
    }); 

    // Setup the dnd 
    $('#largedroparea').on('dragenter', handleDragEnter); 
    $('#largedroparea').on('dragover', handleDragOver); 
    $('#largedroparea').on('dragleave', handleDragLeave); 
    $('#largedroparea').on('drop', handleDrop); 

    function handleDragEnter(e) { 

    } 

    function handleDragOver(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     // Explicitly show this is a copy. 
     e.originalEvent.dataTransfer.dropEffect = 'copy'; 
    } 

    function handleDragLeave(e) { 

    } 

    function handleDrop(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 

     var event = jQuery.Event("drop"); 
     event.originalEvent = e.originalEvent; 
     $('#photos em').trigger(event); 
    } 
</script> 

Answer 4

您是否嘗試過使用CSS來實現這一目標？簡單地說：

div.k-dropzone { 
    height:150px; 
} 

這會讓你的dropzone變大。請不要讓它向下推送文件列表。

希望它有幫助。