ExtJs 4.1以Ajax方式上传文件

ExtJs 4.1 File Upload in Ajax fashion

本文关键字:文件 方式 Ajax ExtJs      更新时间:2023-09-26

我有一个需求,需要使用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>");
                        }
                      });
                    }
                  }
                }]
          }

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

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

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

//store the vals
var vals = form.getValues();
//then, in form.submit...
form.submit({
    params: {
        values: vals
    }
});

Json应该为您处理所有的对象转换(因此您将有一个带有vals对象的不同字段的"values"对象(例如:name:'frank',id:'19381'等))