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






注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com