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)
                }
            }]
        }
    ]
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值