Javascript extJs显示字段不显示图像
我编写了一些显示用户图像的代码。 我想在本地机器上选择/浏览后显示用户图像,但在浏览后不显示。下面我放置了一些代码以便更好地理解Javascript extJs显示字段不显示图像,javascript,extjs,sencha-touch,Javascript,Extjs,Sencha Touch,我编写了一些显示用户图像的代码。 我想在本地机器上选择/浏览后显示用户图像,但在浏览后不显示。下面我放置了一些代码以便更好地理解 this.userPhoto = new Ext.create('Ext.form.field.File', { xtype: 'filefield', padding: '5 5 5', cls: 'p-photo-upload', emptyText: 'Photo',
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.userPhoto=new Ext.create('Ext.form.field.File'{
xtype:'filefield',
填充:“5”,
cls:“p-photo-upload”,
emptyText:“照片”,
确切地说,是的,
fieldLabel:fleet.Language.get(“'u fleet\u USER\u USERDETAIL\u PHOTO'),
姓名:‘照片’,
标签宽度:200,
宽度:“26%”,
msgTarget:'在',
听众:{
范围:本,,
更改:功能(t,值){
var img=“”;
log('image',img,value,t.getRawValue());
//var img=“”;
this.userimage.setValue(img);
}
}
});
上面的代码我用于浏览用户图像。侦听器中的更改事件将图像文件路径设置为显示字段(显示字段代码放在下面)
this.userimage=new Ext.form.field.Display({
标签宽度:200,
cls:“p-upload-icon”,
宽度:“28%”,
身高:70,
labelAlign:'对',
汽车展:是的,
是的,
fieldLabel:fleet.Language.get(“'u fleet\u USER\u USERDETAIL\u ICON'),
值:fleet.Language.get(“”“fleet\u USER\u USERDETAIL\u NOICON”)
//值:“”
});
选择图像后,其显示路径如下img src=“C:\fakepath\boy.png”但图像不显示由于安全原因,无法在上传之前通过javascript直接显示文件。出于您的目的,While关于出于安全原因允许从javascript访问文件是正确的(我把它理解为在上传到服务器之前显示一个图像缩略图)有一个选项,叫做 由于我们尽可能多地模拟HTML5,因此我们能够(除其他外)提供对原始文件数据的访问,即使在通常不支持原始文件数据的环境中也是如此。这样做的最大好处之一是,我们可以在您在对话框中选择图像或从桌面拖放图像时立即显示缩略图
我自己已经在一个项目中实现了这一点。我发现这是一个存储库,您可以查看它是如何实现的。还有与plupload的集成,您可以从中获得一些有用的信息。但是有什么选择吗?没有,对本地文件系统的访问受到限制。选择后,您可以将图像上载到te临时目录,并将上载文件的路径设置为另一种方式。确定。谢谢:)
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' + '/>'
});