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;
        }
    }

  • 相关阅读:
    HDU 5441——Travel——————【并查集+二分查界限】
    HDU 5446——Unknown Treasure——————【CRT+lucas+exgcd+快速乘+递推求逆元】
    HDU 5407——CRB and Candies——————【逆元+是素数次方的数+公式】
    HDU 5412——CRB and Queries——————【线段树套Treap(并没有AC)】
    HDU 4336——Card Collector——————【概率dp】
    HDU 5419——Victor and Toys——————【线段树|差分前缀和】
    使用 Jersey 和 Apache Tomcat 构建 RESTful Web 服务
    使用 JAX-RS 简化 REST 应用开发
    [置顶] 智能家居开源项目 The open Home Automation Bus (openHAB)
    ThoughtWorks 技术雷达(2013年5月)
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2410257.html
Copyright © 2011-2022 走看看