SSH整合+Extjs模拟上传图片并实现预览

 原本以为 提交图片时，预览图片，只需要通过DOM操作，修改 <img>的链接为本地文件路径就可以了。

可是经过测试，除了IE6以外，这种方法并不可行，各个浏览器为了安全问题，都把文件的真是路径隐藏了。

因此对需要浏览的图片，可以先将图片后台上传到服务器，然后服务器返回该图片的临时url，再通过dom操作显示该图片。

下面是用Struts2+Extjs 实现图片上传，并生成预览的实例。

服务端设计

服务端功能较简单，只有接受上传图片，并返回图片的路径，因此就不再赘述。

下面是其返回的信息：

图片预览：

文件名或文件为空：

out.println("{success:true,checked:false,msg:\"文件或文件名为空\"}");

文件上传失败：

out.println("{success:true,checked:false,msg:\"提交文件出错"
					+ e.getMessage() + "\"}");

文件上传成功，并返回图片绝对路径:

out.println("{success:true,checked:true,type:\"view\",msg:\"预览图片成功\",url:\""+request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ request.getContextPath() + "/"+filepath+"\"}");

图片上传：同理图片预览。唯一的区别是返回的“type”字段值变成了其他的。

下面是客户端设计

首先构建Extjs表单，这里采用 模拟 面向对象方法的 写法，这样可以保证 清晰的设计，并且在出现错误的时候通过分块调试快速找出来。

而且在设计的时候就可以分开设计，比如表单，封装成模块后再 考虑 放到窗体上去。

这里需要注意的是，由于表单需要提交自身的引用，因此将 表单的默认初始化 名称 设置为了“form”，因此在初始化的时候，初始化名称必须为“form”，否则表单不会自动提交！！

/**表单对象**/
ViewImagesForm2 = Ext.extend(Ext.FormPanel, {
    constructor : function(_cfg, _url) {
        if (_cfg == null)
            _cfg = {};
        Ext.apply(this, _cfg);
        /*调用父类的构造方法 即 Ext.FormPanel的构造方法*/
        ViewImagesForm2.superclass.constructor.call(this, {

            width : 700,
            height : 310,
            frame : true,
            layout : "form", //布局方式
            plain : true, //强制变颜色
            plain : true, //强制变颜
            buttonAlign : "center", //按钮 对齐 ，默认为 右对齐

            defaults : {
                anchor : "99%"
            }, //锚点布局
            fileUpload : true,
            method : 'POST',
            listeners : {
                "beforeaction" : function(_window) {//  提交之前

                },
                "actioncomplete" : function(_form, _action) {
                    //alert("服务器返回数据： responseText" + _action.response.responseText );
                    var re = _action.response.responseText;
                    var jsonObj = Ext.util.JSON.decode(re);

                    if (jsonObj.checked == true) {//登录成功
                        if (jsonObj.type == "view") {//预览图片
                            /**这里的form 为 该表单对象的初始化名称，在初始化的时候 名称必须为 form,改进方法还没想到**/
                            var img2 = form.findByType("textfield")[3];
                            //修改图片显示位置的DOM显示图片
                            img2.getEl().dom.src = jsonObj.url;

                        }
                        if (jsonObj.type == "upload") {//上传图片
                            Ext.Msg.alert("系统信息", jsonObj.msg, function() {
                                form.ownerCt.hide();
                            });
                        }

                    } else {

                        Ext.Msg.alert("系统信息", jsonObj.msg);
                    }

                }
            },

            items : [{

                baseCls : "x-plain",
                style : "padding:5px;",
                layout : "column", //制定 列布局

                items : [{
                    baseCls : "x-plain", //基本背景CSS样式
                    columnWidth : 0.5, //比例
                    layout : "form",
                    labelWidth : 70,
                    plain : true,

                    defaultType : "textfield",
                    defaults : {
                        xtype : "textfield"
                    },
                    defaults : {
                        anchor : "97%",
                    }, //设置锚点布局
                    items : [{
                        fieldLabel : "图片名称",
                        readOnly : true,
                        name : "filename",

                    }, {
                        fieldLabel : "图片主题",
                        name : "album.title",

                    }, {
                        fieldLabel : "图片介绍",
                        xtype : "textarea",
                        height : "200",
                        name : "album.body",
                    }, {
                        inputType : "file",
                        fieldLabel : "选择图片",
                        anchor : "90%",
                        name : "file",

                        /**
                         * 这里 当 选择图片后，就自动提交表单
                         * 同样的 这里的 表单对象 也是form 原因 前面有。
                         *
                         *
                         * **/
                        listeners : {
                            "change" : function(field, newValue, oldValue) {//更改文件名
                                // alert("changed"+newValue);

                                var filename = field.ownerCt.findByType("textfield")[0];
                                var img2 = field.ownerCt.ownerCt.findByType("textfield")[3];
                                var fi = field.ownerCt.ownerCt.findByType("textfield")[2];
                                var finame = fi.getValue();

                                filename.setValue(newValue);
                                img2.getEl().dom.src = "./images/1.jpg";

                                var f = form.getForm();
                                //提交表单自身,
                                f.submit({
                                    url : _url + "/images/imagesaction.action",
                                });

                            },
                        }
                    }]

                }, {
                    baseCls : "x-plain", //基本背景CSS样式
                    columnWidth : 0.5, //比例
                    layout : "form",
                    labelWidth : 30,
                    defaults : {
                        anchor : "97%",
                    }, //设置锚点布局

                    items : [{

                        xtype : "textfield",
                        fieldLabel : "预览",
                        name : "viewfile",
                        inputType : "image",
                        width : 200,
                        height : 200

                    }]

                }]

            }, {

            }],

        });

    },
});

这个时候就可以测试下 表单布局有没有问题了。

Ext.onReady(function() {
    //初始化标签中的Ext:Qtip属性。
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    var form = new ViewImagesForm2 ();
    form.render(Ext.getBody());

});

测试 如果 表单能够正常 显示，并且能够预览图片的话，就可以这个表单 放到 窗体上来了

ImagesViewWindow2 = Ext.extend(Ext.Window, {

    form : null,
    constructor : function(_cfg, _url) {
        form = new ViewImagesForm2({}, _url);
        if (_cfg == null)
            _cfg = {};
        Ext.apply(this, _cfg);

        form.on("autoup", function() {
            alert("autoup 事件");

        }, this);
        //执行提交

        ImagesViewWindow2.superclass.constructor.call(this, {
            buttonAlign : 'center',
            modal : true,
            title : "上传新图片",
            // _url:_url,
            items : form,
            url : "1234",

            listeners : {
                "show" : function(_window) {
                    
                }
            },

            buttons : [
            /*{
             text:"图片预览",
             handler:this.OnView
             },
             */
            {
                text : "图片上传",
                handler : this.OnSubmit

            }, {
                text : "取消",
                handler : this.OnCancel
            }],

        });

    },
    
    //提交方法
    OnSubmit : function(_url) {
        if (form.form.isValid()) {//表单设置完成
            //  alert("url: "+this.url);
            form.getForm().submit({

                url : "http://127.0.0.1:8080/PersonBlogSSH/album/albumupload.action",
                //url:this.url+"/album/albumupload.action",
                method : "post",
                waitTitle : "正在上传",
                waitMsg : "图片正在上传中，请稍后...",
                success : function(form, action) {// 加载成功的处理函数
                    // form.getForm().reset();

                },
                failure : function(form, action) {// 加载失败的处理函数
                    Ext.MessageBox.alert('系统提示', '操作失败');
                }
            });

        }

    },

    OnCancel : function(_url) {
        Ext.Msg.confirm("系统提示", "你确定放弃当前正在编辑的图片信息并离开?", function(_btn) {
            if (_btn == "yes") {//确定取消
                //重置表单
                form.getForm().reset();
                this.ownerCt.hide();
            }

        }, this)
    }
});