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

  • 相关阅读:
    ul制作导航菜单
    HTML5+CSS (简易nav设计)
    鼠标事件-拖拽(滑块控制物体透明度变化)
    鼠标事件-拖拽5(带虚线框的拖拽)
    鼠标事件-拖拽4(捕获)
    鼠标事件-拖拽3(磁性吸附)
    鼠标事件-拖拽2(不能拖出指定对象的div)
    生成整数排列的方法
    python工具程序一、复制目录中指定扩展名的文件
    Anaconda packages list
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2410257.html
Copyright © 2011-2022 走看看