extJs 显示字段不显示图像

Question

我写了一些显示用户图像的代码。我想在 selecting/browsing 之后在本地计算机上显示用户图像，但在浏览后不显示。下面我放了一些代码以便更好地理解。

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 is right regarding the allowance of accessing files from Javascript due to security reasons, for your purpose (I understood it as displaying an image thumbnail before uploading it to the server) there is an option, and it's called plupload.

Since we emulate as much of HTML5 as possible, we are able (among other things) to provide access to raw file data, even in such environments that do not normally support it. One of the biggest benefits of this is that we can display the thumbnails instantly, right as you select the images in the dialog or drag&drop them from the desktop.

我自己在一个项目中已经实现了一段时间。 Here is a repository that I've found that you can look into to see how it is done. There are also some ExtJS 与 plupload 的集成，您可以从中获得有用的东西。

extJs 显示字段不显示图像

extJs Display field not showing image

javascript

extjs

sencha-touch