解決Extjs上傳圖片無(wú)法預(yù)覽的解決方法
更新時(shí)間:2012年03月22日 11:38:29 作者:
網(wǎng)上找了好多EXTJS上傳圖片預(yù)覽的,但都不行,,,下面雖然IE8可以但肯定還存在其它瀏覽器的兼容性問(wèn)題,待擱應(yīng)付一下吧
復(fù)制代碼 代碼如下:
{
width: 450,
fileUpload: true,
fieldLabel: '選擇圖片',
items: [{
xtype: 'textfield',
id: 'up_forth',
name: 'up_forth',
inputType: 'file',
width: 300
}]
}
預(yù)覽box
復(fù)制代碼 代碼如下:
{
columnWidth: .18,
bodyStyle: ' margin:4px 10px 10px 5px',
layout: 'form',
items: [{
xtype: 'box',
autoEl: {
width: 150, height: 150,
tag: 'div',
id: 'browser_up_forth'
}
}]
}
myfrom表示上傳控件外圍的FormPanel,, contril_id表示上傳控件的ID,只要在程序上預(yù)覽注冊(cè)該方法就可以,preview (myfrom,'up_forth' );
復(fù)制代碼 代碼如下:
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();//刪除原來(lái)的圖片
}
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;
}
}
您可能感興趣的文章:
- extjs圖表繪制之條形圖實(shí)現(xiàn)方法分析
- extjs4圖表繪制之折線圖實(shí)現(xiàn)方法分析
- Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
- ExtJs之帶圖片的下拉列表框插件
- ExtJs使用總結(jié)(非常詳細(xì))
- 學(xué)習(xí)ExtJS Window常用方法
- Extjs學(xué)習(xí)筆記之五 一個(gè)小細(xì)節(jié)renderTo和applyTo的區(qū)別
- Extjs中常用表單介紹與應(yīng)用
- ExtJS 簡(jiǎn)介 讓你知道extjs是什么
- ExtJS下grid的一些屬性說(shuō)明
- extjs圖形繪制之餅圖實(shí)現(xiàn)方法分析
相關(guān)文章
Extjs ajax同步請(qǐng)求時(shí)post方式參數(shù)發(fā)送方式
一般參數(shù)傳遞通過(guò)url后面跟后臺(tái)也能取到,不過(guò)看到send參數(shù)也可以發(fā)送參數(shù),試驗(yàn)了一下服務(wù)器端接受不到發(fā)送的參數(shù),在firebug里看到發(fā)送的請(qǐng)求post部分是一個(gè)串,不太象正常發(fā)送的參數(shù)。2009-08-08
Extjs4 消息框去掉關(guān)閉按鈕(類似Ext.Msg.alert)
類似Ext.Msg.alert();但沒(méi)有關(guān)閉按鈕,由于Extjs4消息框中的關(guān)閉按鈕,沒(méi)有執(zhí)行回調(diào)函數(shù),點(diǎn)擊關(guān)閉按鈕后,直接關(guān)閉窗口,接下來(lái)為大家詳細(xì)介紹下去掉關(guān)閉按鈕2013-04-04
JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析
TreePanel為ExtJS提供了一個(gè)方便的樹(shù)結(jié)構(gòu)數(shù)據(jù)展示,尤其是在處理JSON格式數(shù)據(jù)時(shí)十分常用,接下來(lái)我們就來(lái)看兩則JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析2016-05-05
Extjs中RowExpander控件的默認(rèn)展開(kāi)問(wèn)題示例探討
本文為大家探討下關(guān)于Extjs中RowExpander控件的默認(rèn)展開(kāi)問(wèn)題,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2014-01-01
Extjs在exlipse中設(shè)置自動(dòng)提示的方法
spket最好用了,而且它還支持ext,安裝起來(lái)很簡(jiǎn)單.....2010-04-04

