Extjs图片上传预览

// 图片上传预览

var fileForm = new Ext.form.FormPanel({

title : "",

fileUpload : true,

layout : "form",

id : "fileUploadForm",

border:false,

items : [{

id : 'upload',

name : 'upload',

inputType : "file",

fieldLabel : '上传图片',

// labelSeparator:'',

xtype : 'textfield',

anchor : '40%'

}, {

xtype : 'box',

width : 200,

height : 300,

name : 'pic',

id:'pic_div',

hidden:true,

autoEl : {

tag : 'div',

style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

width:174px;height:227px; text-align:center'

},

listeners : { // 该项被载入时加载照片

'render' : function(_filed) {

//_filed.getEl().dom.src = Ext.getCmp('upload').getValue();//这里图片的路径可以预先从store中读取，赋给变量然后给它

}

}

},{

xtype : 'box',

width : 300,

height : 300,

name : 'pic',

id:'pic_img',

style:'display:block',

autoEl : {

tag : 'img'

},

listeners : { // 该项被载入时加载照片

'render' : function(_filed) {

// _filed.getEl().dom.src = Ext.getCmp('photoUrl').getValue();//这里图片的路径可以预先从store中读取，赋给变量然后给它

}

}

},

addLayout(addLabelText("text","\t建议：为了避免影响系统性能请不要使用较大(>=2M)图片","color:red"))

],

//form事件

listeners : {

'render' : function(f) {

this.form.findField('upload').on('render', function() {

//通過change事件,图片也动态跟踪选择的图片变化

Ext.get('upload').on('change',function(field, newValue, oldValue) {

var imagePathCmp = Ext.get('upload');

if (Ext.isIE) {

//IE浏览器

Ext.getCmp("pic_div").show();

Ext.getCmp("pic_img").hide();

document.getElementById("pic_div").filters.item("DXImageTransform.Microsoft.AlphaImageLo ader").src = "file://"+imagePathCmp.getValue(); // document.selection.createRange().text;

}else{

//Firefox浏览器

// Ext.getCmp("pic_div").hide();

Ext.getCmp("pic_img").show();

//

console.log(Ext.getCmp("pic_img").getEl().dom.src);

Ext.getCmp("pic_img").getEl().dom.src

=window.URL.createObjectURL(document.getElementById('upload').files[0]);

//

console.log(document.getElementById('upload').files[0]);

//

console.log(Ext.getCmp("pic_img").getEl().dom.src);

}

//

var picturePath = imagePathCmp.getValue();

//上传的后缀名

var idx = https://www.360docs.net/doc/9812153107.html,stIndexOf(".");

var docObj = document.getElementById("upload");

var size = document.getElementById('upload').files[0].size;

var fileName = docObj.value;

// console.log('doc');

// console.log(docObj);

// console.log(fileName);

//

console.log(!fileName.match(/.jpg|.gif|.png|.bmp/i));

if(!fileName.match(/.jpg|.gif|.png|.bmp|.ico/i)){

Ext.Msg.alert('提示', '请上传正确的图片类型(.jpg,.gif,.png,.bmp)!');

}

/*

if (idx != -1){

var ext = picturePath.substr(idx+1).toUpperCase();

ext = ext.toLowerCase( );

//判断是不是一般的图片类型

if (ext != 'jpg' && ext != 'gif' && ext !='bmp'){

Ext.Msg.alert('提示', '请上传正确的图片类型(.jpg,.gif,.bmp,.png)！');

// Ext.getCmp('pic').setValue(null);

//把图片显示设为默认的

return;

}

}

*/

});

});

}},

buttons : [{

text : "更换图片",

name : "submit",

handler : submit

},{

text: '重置',

handler: function(){

fileForm.getForm().reset();

if(Ext.getCmp("pic_img"))Ext.getCmp("pic_img").getEl().dom.src='';

if(Ext.getCmp("pic_div"))Ext.getCmp("pic_div").getEl().dom.src='';

}

}]

});

function submit() { //此处提交最好使用ajax请求,否则会只提交一次

Ext.getCmp("fileUploadForm").getForm().submit({

url : url,

method : "POST",

// waitMsg:"图片上传中，请稍等....", success : function(form, action) {

alert("success");

},

failure : function(form, action) {

alert("failure");

}

});

}