zoukankan      html  css  js  c++  java
  • 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;
        }
    }

  • 相关阅读:
    Redis 常用模式思路
    MacOS Catalina 10.15 利用shell脚本启动NGINX、MySQL、PHP
    windows上 python有多版本,如何管理,如何区别?
    20180813视频笔记 深度学习基础上篇(1)之必备基础知识点 深度学习基础上篇(2)神经网络模型视频笔记:深度学习基础上篇(3)神经网络案例实战 和 深度学习基础下篇
    20180813视频笔记 深度学习基础上篇(1)之必备基础知识点 深度学习基础上篇(2)神经网络模型
    数据集
    基于深度学习的目标跟踪
    使用GitHub+Hexo建立个人网站,并绑定自己的域名(Ubuntu环境下)
    使用jemdoc制作个人主页
    《2017全球人工智能人才白皮书》发布丨解读世界顶级AI牛人的秘密——腾讯研究院
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2410257.html
Copyright © 2011-2022 走看看