3

我能找到的唯一一种引用“放置区”的文档是

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

现在如何将 dropzone 设置为像Blueimp这样的整个页面？

4

4 回答 4

2

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

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

祝你好运。

于 2014-04-16T18:37:04.057 回答
2

这应该将 drop 事件从“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>
于 2014-07-07T10:16:14.307 回答
0

使用当前版本的 Kendo UI Uploader 无法增加 dropzone 的大小。

可能的替代方案：

在您的页面周围创建一个 div ，每当将文件放入此 div 时，都会创建一个类似于filesToUpload的列表，然后将这个列表分配给 kendo 上传的文件选项。

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

这样你就可以在你的剑道上传器中看到被删除的文件。

于 2014-04-15T09:39:00.273 回答
0

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

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

这将使您的放置区更大。请不要将文件列表向下推。

希望能帮助到你。

于 2015-03-25T15:10:39.390 回答