Ext怎样在上传图片之前预览

最新推荐文章于 2021-02-23 15:37:32 发布

Sukla

最新推荐文章于 2021-02-23 15:37:32 发布

阅读量944

点赞数

分类专栏： Ext.js

本文链接：https://blog.csdn.net/Sukla/article/details/76432540

版权

Ext.js 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

看了半天发现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)
                }
            }]
        }
    ]
})