Question

我写了一些用于显示用户图像的代码。我希望在本地计算机上选择/浏览后显示用户图像，但在浏览后不显示。下面我放置了一些代码以便更好地理解。

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 img = '<img src="' + t.getValue() + '" />';
                    console.log('image', img, value, t.getRawValue());
                    //var img = '<img src="' + FLEET_SERVER_URL + 'images/users/DefaultUserIcon.jpg' + '" />';
                    this.userimage.setValue(img);
                }
            }
        });

以上代码用于浏览用户图片。在侦听器中更改事件将图像文件路径设置为显示字段（显示下面的显示字段代码）

  this.userimage = new Ext.form.field.Display({
            labelWidth: 200,
            cls: 'p-uploaded-icon',
            width: '28%',
            height: 70,
            labelAlign: 'right',
            autoShow: true,
            autoRender: true,
            fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_ICON_'),
            value: fleet.Language.get('_FLEET_USER_USERDETAIL_NOICON_')
            //value: '<img src="' + FLEET_SERVER_URL + 'appRes/images/user.jpg' + '/>'
        });

选择图像后，其显示路径如下img src =“C：\ fakepath \ boy.png”但图片未显示

Answer 1

由于安全原因，在上传之前无法直接通过javascript显示文件。

Answer 2

虽然@Tyr因为安全原因允许从Javascript访问文件是正确的，但为了您的目的（我将其理解为在将图像缩略图上传到服务器之前显示图像缩略图），有一个选项，它是叫plupload。

由于我们尽可能多地模拟HTML5，因此我们能够（除其他外）提供对原始文件数据的访问，即使在通常不支持它的环境中也是如此。这样做的最大好处之一是我们可以立即显示缩略图，就像您在对话框中选择图像一样，或者从桌面拖放它们。

我自己已经在项目中实施了一段时间。 Here是一个存储库，我发现您可以查看它是如何完成的。还有some ExtJS与plupload的集成，您可以从中获得有用的东西。

extJs显示不显示图像的字段

2 个答案: