forms - Extjsファイルのアップロードの進行状況

Question

ExtJS4でフォームファイルのアップロードの例を見てきましたが、ファイルのアップロードの進行状況をカスタマイズする必要があります。

waitMsg configプロパティが表示されますが、それを使用したくないし、extjsサードパーティプラグインを使用したくありません。

では、extjsのアップロードフォームから現在のアップロードの進行状況を簡単に取得するにはどうすればよいですか？

Answer 1

waitMsgは、進行状況バーが無限に自動更新されるメッセージボックスを使用します。したがって、現在のアップロードを表示するプログレスバーを作成することはできません。

独自に作成してアップロード時間Ext.ProgressBarを見積もり、完了したら最大値に設定できます。しかし、私はあなたがそれを望まないと思います。

質問に答えるには：現在のアップロードの進行状況を単純に追跡することはできません。

---

このユーザーエクスペリエンスが本当に必要な場合は、サードパーティのコンポーネントを試すことができます。

---

ドキュメントを引用するには：

ファイルのアップロードは、通常の「Ajax」手法を使用して実行されません。つまり、XMLHttpRequestsを使用して実行されません。代わりに、フォームは標準的な方法で送信され、DOM要素は一時的に変更され、動的に生成された非表示を参照するようにターゲットが設定されます。これはドキュメントに挿入されますが、戻りデータが収集された後に削除されます。

Answer 2

buttons: [{
    text: 'Upload',
    handler: function () {
        var form = this.up('form').getForm();
        if (form.isValid()) {
            form.submit({
                url: '/upload/file',
                waitMsg: 'Uploading your file...',
                success: function (f, a) {
                    var result = a.result,
                        data = result.data,
                        name = data.name,
                        size = data.size,
                        message = Ext.String.format('<b>Message:</b> {0}<br>' +
                            '<b>FileName:</b> {1}<br>' +
                            '<b>FileSize:</b> {2} bytes',
                            result.msg, name, size);

                    Ext.Msg.alert('Success', message);
                },
                failure: function (f, a) {
                    Ext.Msg.alert('Failure', a.result.msg);
                }
            });
        }
    }
}]

進行状況ウィンドウ付きのライブデモはこちら

Answer 3

実際の進行状況を表示するには、XMLHttpRequestのonprogressコールバックを使用できます。

Ext.override(Ext.data.request.Ajax, {
    openRequest: function (options) {
        var xhr = this.callParent(arguments);
        if (options.progress) {
            xhr.upload.onprogress = options.progress;
        }
        return xhr;
    }
});

次に、次のように使用します。

Ext.Ajax.request({
    url: '/upload/files',
    rawData: data,
    headers: { 'Content-Type': null }, //to use content type of FormData
    progress: function (e) {
        console.log('progress', e.loaded / e.total);
    }
});

こちらのオンラインデモをご覧ください。