成功处理程序不会使用extjs进行文件上传 [英] Success handler not getting called in file upload using extjs

问题描述

我有一个J2EE Web应用程序，其中包含一个表单，我将文件上传到服务器上的某个位置。在上传过程中，向用户显示一个waitMsg，一旦上传完成，一个msgBox指示相同的消息就会消失。成功案例的代码也在js文件中提供。但是，上传工作正常，但是即使在服务器上传完成后，waitMsg也会继续。


给出js代码：

  Ext.onReady（function ）{
 
 Ext.QuickTips.init（）; 
 
 var msg = function（title，msg）{
 Ext.Msg.show（{
标题：title，
 msg：msg，
 minWidth：200，
 modal：true，
图标：Ext.Msg.INFO，
按钮：Ext.Msg 。
}; 
}; 
 
 var fp = new Ext.FormPanel（{
 renderTo：'fi-form'，
 fileUpload： 
 width：500，
 frame：true，
 title：'Upload XML Config File'，
 autoHeight：true，
 bodyStyle：'padding：10px 10px 0 10px;'，
 labelWidth：50，
 defaults：{
 anchor：'95％'，
 allowBlank：false，
 msgTarget：'side'
}，
 items：[{
 xtype：'fileuploadfield'，
i d：'form-file'，
 emptyText：'选择要上传的xml文件'，
 fieldLabel：'File'，
 name：'file'，
 buttonCfg：{ 
 text：''，
 iconCls：'upload-icon'
} 
}]，
按钮：[{
 text：'Upload' 
处理程序：function（）{
 if（fp.getForm（）。isValid（））{
 fp.getForm（）。submit（{
 url：'uploadXML.htm '，
 waitMsg：'上传你的xml文件...'，
 success：function（fp，o）{
 msg（'Success'，'Processed file''+ o.result服务器上的.file +'）; 
} 
}）; 
} 
 if（！validateFileExtension（Ext.getDom（'form-file'）。value））{
 Ext.MessageBox.alert（'选择另一个文件'，
'只有XML文件。 
返回; 
} 
} 
}，{
文本：'重置'，
处理程序：function（）{
 fp.getForm（） ; 
} 
}] 
}）; 
 
函数validateFileExtension（fileName）{
 var exp = /^.*\.(xml|XML)$/; 
 return exp.test（fileName）; 
} 
 
}）; 
  

不知道我错过了什么。

提前感谢。 >

解决方案

'uploadXML.htm'必须是PHP或类似的服务器端程序。这个PHP必须返回JSON字符串，如：{'success'：true}或{'success'：false}。

I have a J2EE web app with a form where I upload a file to a location on a server. During the upload a waitMsg is shown to the user which should disappear once the upload is completed with a msgBox indicating the same. The code for the success case is also provided in the js file. However the upload works fine, but the waitMsg continues even after the upload at the server has completed.
The js code is given:

Ext.onReady(function(){

    Ext.QuickTips.init();

    var msg = function(title, msg){
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: true,
        title: 'Upload XML Config File ',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select the xml File to upload',
            fieldLabel: 'File',
            name: 'file',
            buttonCfg: {
                text: '',
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: 'Upload',
            handler: function(){
                if(fp.getForm().isValid()){
                    fp.getForm().submit({
                        url: 'uploadXML.htm',
                        waitMsg: 'Uploading your xml file...',
                        success: function(fp, o){
                        msg('Success', 'Processed file "'+o.result.file+'" on the server');
                        }
                    });
                }
                if (!validateFileExtension(Ext.getDom('form-file').value)) {
                    Ext.MessageBox.alert('Select another file',
                    'Only XML file, please.');
                    return;
                    }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

    function validateFileExtension(fileName) {
        var exp = /^.*\.(xml|XML)$/;
        return exp.test(fileName);
        }

});

Not sure what I am missing.
Thanks in advance.

解决方案

'uploadXML.htm' must be PHP or similar server side procedure. this PHP must return JSON string, like : {'success':true} or {'success':false}.

这篇关于成功处理程序不会使用extjs进行文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！