Ext怎样在上传图片之前预览
看了半天发现ext的上传图片的组件里面有2个input
第一个是显示图片名字的 不用管它;
我们要第二个
获取里面的路径
document.getElementById("photoshowup-button-fileInputEl").files.item(0)
这个会得到一个数据
我这个预览图片就是把得到的这个数据在reader出来
这个是reader后的图片var img=document.getElementById('browseImage')
开始reader
reader.onload = function(evt) {
document.getElementById('browseImage').src = evt.target.result;
}
reader.readAsDataURL(document.getElementById("photoshowup-button-fileInputEl").files.item(0));
我们来选个图片
控制台里面
var reader = new FileReader();
reader.onload = function(evt) {
document.getElementById('browseImage').src = evt.target.result;
}
reader.readAsDataURL(document.getElementById("photoshowup-button-fileInputEl").files.item(0));
OK 可以预览。
我在控制台搞得,demo还没弄好。
...................................................................................................我是分割线.................................................................
更新一下代码 可以用了
/** * Created by Sukla on 2017/7/31. */ Ext.define('app.view.common.imageshow.ImageShow', { extend: 'Ext.container.Container', alias: 'widget.image-show', layout: { type: 'vbox', align: 'stretch' }, defaults: { xtype: 'form', layout: 'anchor', bodyPadding: 10, style: { 'margin-bottom': '20px' }, defaults: { anchor: '100%' } }, items: [ { title: 'File Upload Form', frame: true, bodyPadding: '10 10 0', reference: 'firstForm', defaults: { anchor: '100%', allowBlank: false, msgTarget: 'side', labelWidth: 50 }, items: [ { xtype: 'filefield', emptyText: 'Select an image', id: 'photoshowup', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls: 'file-uploads-image-add' }, listeners:{ 'change':function(){ var me=this, photoshowupfile=me.el.dom.getElementsByTagName('input')[1], photoshowupimg=this.nextSibling().el.dom; var reader = new FileReader(); reader.onload = function(evt) { photoshowupimg.src = evt.target.result; } reader.readAsDataURL(photoshowupfile.files.item(0)); } } }, { xtype: 'box', id: 'browseImage', fieldLabel: "预览图片", autoEl: { width: 300, height: 300, tag: 'img', // type : 'image', src: Ext.BLANK_IMAGE_URL, style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);', complete: 'off', id: 'imageBrowse' } } ], buttons: [{ text: 'Save', handler: function () { var form = this.ownerCt.ownerCt.items.first().el.dom; console.log(form) } }] } ] })