0

我有一个要求，我需要使用 ExtJs 以 ajax 方式上传文件。我的表单已经有许多其他字段，例如文本、文本区域等。我已将我的文件字段包含在父表单中的单独表单中。此外，该表单有一个上传按钮，可以在单击它时执行该功能。在那个按钮处理程序中，我提交了包含文件字段的表单。它的工作就像一个魅力。唯一的问题是页面会被刷新。我不想要那个。我需要以 ajax 方式进行此上传。

这可能使用 ExtJs 吗？我知道当我们使用纯 html/javascript 时，通过将表单目标设置为 iframe 可以轻松防止页面刷新。

我们有没有这样的解决方案？

请给这个问题一些想法或解决方案

这是我的代码片段：

{
            xtype: 'form',                
            items: [
                {
                  xtype: 'filefield',
                  name: 'file',
                  fieldLabel: '<b>Presentation</b>',
                  msgTarget: 'side',
                  labelAlign: 'top',
                  width: 300,
                  allowBlank : true,
                  id: 'file',

                  buttonCfg: {
                    text: '',
                    iconCls: 'upload-icon'
                 }
                },
                {
                  xtype: 'panel',
                  id: 'selectdFileName',
                  html: '<b>' + presenationFile + '</b>'
                },
                {
                  xtype: 'panel',
                  html: '<br/>'
                },
                {
                  xtype: 'button',
                  text: 'Upload',
                  handler: function() {
                    var form = this.up('form').getForm();
                    form.target = 'upload_target';
                    if (form.isValid()) {
                      form.submit({
                        url: contextPath + '/app/uploadFile',
                        params: {
                          id: formId
                        },
                        waitMsg: 'Uploading presentation...',
                        success: function(form, action) {
                          var respJson = Ext.JSON
                                  .decode(action.response.responseText);
                          Ext.getCmp('selectdFileName').update(
                                  "<b>" + respJson.path + "</b>");
                        }
                      });
                    }
                  }
                }]

          }

在上面的代码中，另一个带有可能其他字段的表单包含了这个表单。

让我知道这是否能让您更好地理解我的问题。

4

1 回答 1

0

在您的上传按钮中，我会尝试以下操作：

//store the vals
var vals = form.getValues();

//then, in form.submit...

form.submit({
    params: {
        values: vals
    }
});

Json 应该为您处理所有对象转换（因此您将拥有一个“值”对象，其中包含 vals 对象的不同字段（例如：名称：'frank'，id：'19381' 等））

于 2013-08-02T14:45:49.353 回答