Home  >  Article  >  Web Front-end  >  Solution to the problem that Extjs uploaded images cannot be previewed_extjs

Solution to the problem that Extjs uploaded images cannot be previewed_extjs

WBOY
WBOYOriginal
2016-05-16 17:55:101426browse
Copy code The code is as follows:

{
width: 450,
fileUpload: true,
fieldLabel: 'Select image',
items: [{
xtype: 'textfield',
id: 'up_forth',
name: 'up_forth',
inputType: ' file',
width: 300
}]
}

preview box
Copy code The code is as follows:

{
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 represents the FormPanel surrounding the upload control, and contril_id represents the ID of the upload control. You only need to preview and register this method on the program. , preview (myfrom,'up_forth' );
Copy code The code is as follows:

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();//Delete the original picture
}
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);
}

//Get the image address
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;
}
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn