Question

我可以找到引用“drop zone”的唯一documentation类型是

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

现在我如何将dropzone设置为整个页面，如Blueimp？

Answer 1

这应该委托来自＆＃34; largedroparea＆＃34;到剑道上传

<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 2

为什么不覆盖默认的dropzone大小？您可以使用基本css增加大小。

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

祝你好运。

Answer 3

使用当前版本的Kendo UI Uploader，无法增加掉落区域大小。

可能的替代方案：

在页面周围创建一个div，每当在此div中删除文件时，创建一个列表，如 filesToUpload ，然后将此列表分配给kendo upload的files选项。

            files: filesToUpload,

获取已删除文件的步骤：

停止dropzone div的drop事件中的默认行为

    $("#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())
                });
    }

通过这种方式，您可以在kendo上传器中看到已删除的文件。

Answer 4

您是否尝试过使用CSS来实现这一目标？简单地：

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

这将使你的dropzone更大。请不要将文件列表向下推。

希望它有所帮助。

如何增加kenoui上传小部件的dropzone

4 个答案: