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