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