1

私は現在、ExtJS 6 を使用してビューが記述されている Web アプリケーションを持っています。現在、ユーザーがファイル システムから Web サーバーにファイルをドラッグ アンド ドロップできるようにすることを目的とした Java アプレットを使用しています。私の目的は、そのアプレットを削除し、ExtJS6 を使用してドラッグ & ドロップを処理することです: それは可能ですか?

ドキュメントで検索しようとしましたが、見つかった唯一のトピック ( https://docs.sencha.com/extjs/6.0/core_concepts/drag_drop.html ) は、フレームワーク要素のドラッグ アンド ドロップに関するものでした。

4

3 に答える 3

1

sencha フォーラムで見つけたソリューションを使用しています。

Ext.define('FileDropper', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.filedropper',

    overCls: '',

    init: function(c) {
        this.target = c;
        c.on({
            element: 'el',
            scope: this,
            dragover: this.onDragOver,
            dragenter: this.onDragEnter,
            dragLeave: this.onDragLeave,
            drop: this.onDrop
        });
    },

    onDragOver: function(e) {
        e.stopEvent();
    },

    onDragEnter: function(e) {
        this.target.addCls(this.overCls);
        e.stopEvent();
    },

    onDragLeave: function() {
        this.target.removeCls(this.overCls);
    },

    onDrop: function(e) {
        var callback = this.callback,
            scope = this.scope || this;

        e.stopEvent();
        this.target.removeCls(this.overCls);
        if (callback) {
            callback.call(scope, e.browserEvent.dataTransfer.files);
        }
    }
});

次のようにプラグインをビューに追加します。

Ext.define('MyPanel', {
    extend: 'Ext.Panel',

    // ... your content

    plugins: [{
        ptype: 'filedroppper'
        overCls: 'foo'
        callback: function(files) {
            // handle your upload
        }
    }]
});

ドロップされたファイルをコールバックで処理するだけです。

    callback: function (files) {
        var url = 'example.org'
        var xhr = new XMLHttpRequest();
        var fd = new FormData();

        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Handle response.
                alert(xhr.responseText); // handle response.
            }
        };

        for (var i = 0; i < files.length; i++) {
            fd.append('files', files.item(i));
        }

        // Initiate a multipart/form-data upload
        xhr.send(fd);
    }

ただし、FormData()を使用する場合は、古いブラウザーをサポートする必要がないことを確認してください。

于 2015-11-12T09:50:28.367 に答える