• Extjs解决上传图片预览


    网上找了好多EXTJS上传图片预览的,但都不行,,,下面虽然IE8可以但肯定还存在其它浏览器的兼容性问题,待搁应付一下吧。。

    {
                   450,
                   fileUpload: true,
                   fieldLabel: '选择图片',
                   items: [{
                       xtype: 'textfield',
                       id: 'up_forth',
                       name: 'up_forth',
                       inputType: 'file',
                       300
                   }]
    }

    预览box

    {
                       columnWidth: .18,
                       bodyStyle: ' margin:4px 10px 10px 5px',
                       layout: 'form',
                       items: [{
                           xtype: 'box',
                           autoEl: {
                               150, height: 150,
                               tag: 'div',
                               id: 'browser_up_forth'
                           }
                       }]
    }

    myfrom表示上传控件外围的FormPanel,, contril_id表示上传控件的ID,只要在程序上预览注册该方法就可以,preview (myfrom,'up_forth' );

    var preview = function (myform, control_id) {
        var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
        myform.on('render', function (f) {
            myform.form.findField(control_id).on('render', function () {
                Ext.get(control_id).on('change', function (field, newValue, oldValue) {
                    var obj = Ext.get(control_id).dom;
                    var url = getFullPath(obj);
                    if (img_reg.test(url)) {
                        var newPreview = Ext.get('browser_' + control_id).dom;
                        var showPic = Ext.get("showPic_" + control_id);
                        if (showPic != null) {
                            showPic.remove();//删除原来的图片
                        }
                        var imgDiv = document.createElement("div");
                        imgDiv.id = "showPic_" + control_id;
                        document.body.appendChild(imgDiv);
                        imgDiv.style.width = "150px";
                        imgDiv.style.height = "150px";
                        imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
                        imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
                        newPreview.appendChild(imgDiv);
                    }
                }, this);
            }, this);
        }, this);
    }

    //得到图片地址
    function getFullPath(obj) {
        if (obj) {
            // ie
            if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                obj.select();
                return document.selection.createRange().text;
            }
            // firefox
            else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                if (obj.files) {
                    return obj.files.item(0).getAsDataURL();
                }
                return obj.value;
            }
            return obj.value;
        }
    }

  • 相关阅读:
    Delphi 实现C语言函数调用
    Delphi采用接口实现DLL调用
    select、poll、epoll之间的区别总结[整理]
    int 的重载
    qt 安装包生成2
    线程池的简单实现
    qt 安装包生成
    linux 下tftpf搭建
    2018C语言助教总结
    动态规划——最长子序列长度
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2410257.html
Copyright © 2020-2023  润新知