3

「ドロップ ゾーン」を参照しているドキュメントの唯一のタイプは次のとおりです。

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

Blueimpのようにドロップゾーンをページ全体に設定するにはどうすればよいですか?

4

4 に答える 4

2

これにより、ドロップ イベントが "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 の現在のバージョンでは、ドロップゾーンのサイズを大きくすることはできません。

可能な代替案:

ページを囲む div を作成します。ファイルがこの div にドロップされるたびに、ドロップされたファイルのfilesToUploadのようなリストを作成し、このリストを剣道アップロードのファイル オプションに割り当てます。

            files: filesToUpload,

ドロップされたファイルを取得する手順:

dropzone div のドロップ イベントでデフォルトの動作を停止します

    $("#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 に答える