Question

我有文件上传控制，使用它上传服务器上的图像文件。在这个操作中，我将提交两次表格。问题是提交表格后第一次提交文件上传文件，在第二次提交时给出值null。让我们看看我的代码如下。

this.userPhoto = new Ext.create('Ext.form.field.File', {
        xtype: 'filefield',
        padding: '5 5 5',
        cls: 'p-photo-upload',
        emptyText: 'Photo',
        buttonOnly: true,
        fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'),
        name: 'photo',
        labelWidth: 200,
        width: '26%',
        msgTarget: 'under',
        listeners: {
            scope: this,
             change: function (t, value) {
                var data = {};
                data.userPhoto = t.value;
                data.imageType = 'userPhoto';
                var postdata = Ext.encode(data);
                postdata = Base64.encode(postdata);
                this.UserDetailform.getForm().submit({
                    scope: this,
                    url: FLEET_PROXY_URL + 'index.php?c=user&a=uploadphoto',
                    params: { postData: postdata },
                    success: function (form, action) {
                        this.setLoading(false);
                        var b = Ext.decode(action.response.responseText);
                        console.log(b);
                        if (b && b.data && b.success === "S") {
                            var img = '<img src="' + FLEET_SERVER_URL + 'images/temporary/' + b.data.photoname + '" />';
                            this.userimage.setValue(img);
                        } else {
                            this.UserDetailform.getForm().findField('photo').markInvalid(fleet.Language.get(b.errors[0].photo));
                        }
                    }
                });
            } 
        }
    });

this.userPhoto 是Ext.form.field.File的对象，在浏览文件后我通过提交表单上传它（你可以看到监听器中的代码更改此事件.userPhoto ）这个表单提交方法我用于保存服务器端的临时文件。接下来我将在第二次提交时保存相同的文件和其他用户详细信息，但在第二次提交时，我从This.userPhoto中得不到任何内容。请看下面的屏幕截图，你可以更好地了解这一点。

在图片中，您可以看到浏览和保存按钮第一个表单提交方法在选择文件后完成，第二个单击SAVE按钮单击。

Answer 1

sencha文件上传字段无法保留其状态，因为基础HTML字段是文件上载字段，并不打算在表单提交中保持其状态。

在表单中使用文件上传字段时有很多缺点，我已经切换到不同的图像上传方法。

在我的应用程序中，需要上传图片时，文件上传字段未连接到实际表单，而是自行提交，然后后端会将data URL图像返回给客户端。然后，客户端通常将此数据URL放入表单中的隐藏字段中。绑定到隐藏字段的xtype:'image'显示前端中隐藏字段（=图像）的内容。

那样，

数据URL可以更容易在数据库中处理，因为它是一个“可读”的字符串，而不是blob，
数据网址与表单中的所有其他数据一起加载和保存，
可以无限地加载和保存数据URL，
我只需要一个处理图像上传的后端端点，并且可以从那里使用数据URL（字符串），
所有表单都可以作为JSON提交（文件上载字段强制执行标准提交，因此当文件上载字段添加到现有表单时，我将丢弃已经为该端点提供的所有后端代码）。 / LI>

主要缺点是图像比简单的文件上传更频繁地通过网络，但至少对我来说，这是一个小问题。

如何在ExtJs中维护文件字段的状态

1 个答案: