10

Ext JS フォームを使用してファイルをアップロードしようとしています。成功または失敗した場合は、適切なメッセージを表示します。しかし、私は望ましい結果を得ることができません。コールバックを実行するsuccessことができません。failureform.submit

私が今までやったことは次のとおりです。

このスクリプトでフォームを作成する:

new Ext.FormPanel({
    fileUpload: true,
    frame: true,
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
}).getForm().submit()


​/*
    The response Content-Type is text/html (with charcode=utf8);
    The response JSON is: { "success": true }
*/​​

この回答に基づいて応答Content-Typeを設定します。Ext JS docs に基づいて、適切な JSON 結果を送り返します。Fiddler を介してキャプチャされた応答は次のとおりです。text/html

{"success":false}

また

{"success":true}

応答の Content-Type を に設定しましたapplication/json。しかし、まだ成功していません。

thisやthisなどのリンクを読みましたが、どれも役に立ちませんでした。アップロード フィールドと保存ボタンを含むフォームを作成する別のスクリプトも試し、保存ボタンのハンドラーでフォームを送信したことに注意してください。しかし、まだコールバックは発生しません。

4

3 に答える 3

11

これが実際の例です - Javascript コード:

Ext.onReady(function () {

    Ext.define('ImagePanel', {
        extend: 'Ext.form.Panel',
        fileUpload: true,
        title: 'Upload Panel',
        width: 300,
        height: 100,

        onUpload: function () {
            this.getForm().submit({
                url: 'upload.php',
                scope: this,
                success: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Success: " + data.msg);
                },
                failure: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Failure: " + data.msg);
                }
            });
        },

        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'fileuploadfield',
                        buttonText: 'Upload',
                        name: 'uploadedFile',
                        listeners: {
                            'change': {
                                scope: this,
                                fn: function (field, e) {
                                    this.onUpload();
                                }
                            }
                        }
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('ImagePanel', {
        renderTo: Ext.getBody()
    });
});

そしてPHPコード：

<?php
if (isset($_FILES)) {
    $temp_file_name = $_FILES['uploadedFile']['tmp_name'];
    $original_file_name = $_FILES['uploadedFile']['name'];

    echo '{"success": true, "msg": "'.$original_file_name.'"}';

} else {
    echo '{"success": false, "msg": "No Files"}';
}
于 2013-01-01T13:52:43.997 に答える
3

私もかなり長い間これに苦労してきました。これが私のコードです：

Ext.getCmp('media-upload-form').getForm().doAction('submit', {
    url: './services/recordmedia/upload',
    method: 'post',
    waitMsg: 'Please wait...',
    params: {
        entityId: this.entityId,
    },
    failure: function(form, action){
        alert(_('Error uploading file'));
        this.fireEvent('file-upload');
        this.close();
    },
    success: function(form, action){
        this.fireEvent('file-upload');
        this.close();
    },
    scope: this
})

応答は常にブラウザによって <pre> タグでラップされていたため、Extj ライブラリがコールバックを呼び出さなかったのです。これを修正するには:

  • サーバーが正しいjsonを返すことを確認してください: {"success":true}
  • content-type が text/html に設定されていることを確認してください
于 2013-04-10T15:55:02.757 に答える
-1

実際、これは Ext.form.Panel と Ext.form.Basic のドキュメントで十分にカバーされています。コードが機能しない問題は、フォーム パネルに "success"、"failure" という構成オプションがないことです。これらは、送信アクションに渡される構成オブジェクトに配置する必要があります。したがって、コードは次のようになります。

new Ext.FormPanel({
    fileUpload: true,
    frame: true


}).getForm().submit({
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
});

違いに注意してください: Ext 4 にはフォーム コンポーネント (Ext.form.Panel) があり、これは基本的にフォームの外観に関係するビュー コンポーネントであり、次に関連するフォーム クラス (Ext.form.Basic など) があります。機能を備えています。フォーム送信は Ext.form.Basic (またはあなたの によって返されたものform.getForm()) によって処理されます。

于 2013-10-17T15:03:13.980 に答える