ExtJs4.x 上传文件 upload filetext TypeError:result is undefined解决

Extjs4上传文件时返回Json数据，导致TypeError:result is undefined错误

 

Ext.create('Ext.form.Panel', {

    title: 'Upload a Photo',

    width: 400,

    bodyPadding: 10,

    frame: true,

    renderTo: Ext.getBody(),

    items: [{

        xtype: 'filefield',

        name: 'photo',

        fieldLabel: 'Photo',

        labelWidth: 50,

        msgTarget: 'side',

        allowBlank: false,

        anchor: '100%',

        buttonText: 'Select Photo...'

    }],

 

    buttons: [{

        text: 'Upload',

        handler: function() {

            var form = this.up('form').getForm();

            if(form.isValid()){

                form.submit({

                    url: 'photo-upload.php',

                    waitMsg: 'Uploading your photo...',

                    success: function(fp, o) {

                        Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');

                    }

                });

            }

        }

    }]

});

 

这个提交会导致Request Headers改变，Accept属性，表示不接收application/json的数据，这个会在Chrome上执行但是会出提示，在FireFox上根本执行不了，并且报TypeError:result is undefined错误

 

请阅读：

Ext.data.Connection中的一段文字，关于fileupload

File Uploads

File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed after the return data has been gathered.

The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

Characters which are significant to an HTML parser must be sent as HTML entities, so encode < as <, & as & etc.

The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks.

Be aware that file upload packets are sent with the content type multipart/form and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.

Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire.

 

解决方法：

将服务器的返回类型改为text/html即可