Extjs - 使用文件字段上传文件

Posted 2023-02-26

【中文标题】Extjs - 使用文件字段上传文件

【英文标题】：Extjs - upload file using filefield

【发布时间】：2013-06-20 08:27:31

【问题描述】：

我的 extjs 代码如 http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.File.html

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.');
                    
                );
            
        
    ]
);

我的 photo-upload.php 文件

echo "success:true";

但是当成功o.result.file显示undefined。我认为它会在成功后显示文件名。 成功后如何让它显示文件名谢谢

【参考方案1】：

您只是返回"success:true"，这甚至不是有效的 JSON，但希望 ExtJS 为您提供更多数据？

尝试返回 JSON 格式

 "success": true, "file": "filename" 

以便客户端可以读取结果中的文件属性。

【讨论】：

我这样做了： $result = array( 'success' => 'true', 'file' => 'filename.ext' ); $x= json_encode($result);回声 $x;

【参考方案2】：

只需将正确的 json 构造返回给前端的 eval。

要将文件名显示为消息，您不需要从后端返回值，您已经可以使用它。参考下面的代码

var fileUploadComp = // 例如：Ext.getCmp('DictUploadField'); var fileName = fileUploadComp.getValue();

将此fileName 放入您的消息中。

谢谢。

【参考方案3】：

​注意：服务器响应类型应为“text/html”。

return Json(new 
    success = true,
    msg = "Your file has been uploaded"
, "text/html");

现场演示是here