在Ext中Component,没有对应的file控件。但可以把xtype=textfield 的 inputType定义成file.但在Ext2.2中以上方法在Chrome中显示有问题。而用Ext提供的一个Ext.form.FileUploadField可以显示完全。.
在firefox中,由于考虑到安全问题,firefox 中不能通过document.getElementByID('file控件id‘)得到文件的全路径,只有一个文件名。网上有如下代码,可以实现在HTML中得到全路径:
<script>
if (navigator.userAgent.indexOf("MSIE") != -1) {
return getFilePath(fileBrowser);
} else if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Mozilla") != -1) {
return getFilePathWithFF(fileBrowser);
} else {
return;
}
}
function getFilePath(fileBrowser) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
fileBrowser.select();
return document.selection.createRange().text;
} else if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Mozilla") != -1)
return this.getFilePathWithFF(fileBrowser);
else alert("Not IE or Firefox (userAgent=" + navigator.userAgent + ")");
};
function getFilePathWithFF(fileBrowser) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch(e) {
alert('由于浏览器安全问题 请按照以下设置 [1] 地址栏输入 "about:config" ;[2] 右键 新建 -> 布尔值 ; [3] 输入 "signed.applets.codebase_principal_support" (忽略引号).');
return;
}
var fileName = fileBrowser.value;
alert(fileName );
var file = Components.classes["@mozilla.org/file /local;1"].createInstance(Components.interfaces.nsILocalFile);
try { // Back slashes for windows
file.initWithPath(fileName.replace(/\//g, "\\\\"));
} catch(e) {
if (e.result != Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH)
throw e;
alert("File '" + fileName + "'cannot be loaded: relative paths
are not allowed. Please provide an absolute path to this file.");
return;
}
alert(file.path);
return file.path;
}
</script>
<html>
<head>
<meta charset="gbk">
</head>
<body>
<input type="file" id="file"></input>
<input type="button" οnclick="readFile(document.getElementById('file'))" value="上传"></input>
</body>
</html>
用Ext的xtype=textfield 的 inputType=file方式上传文件时,在firefox中用readFile(Ext.getCmp('file的id').dom)也能传入全路径。但考虑到浏览器的兼容性,Chrome不能使用,所以只能采用Ext.form.FileUploadField。而Ext.form.FileUploadField通过上面的方式却不能得到全路径。我采取的方式是修改Ext.form.FileUploadField的源码。修改如下:
在Ext.form.FileUploadField文件中,原代码:
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));
if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}
this.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}, this);
修改过后的代码:
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));
if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}
this.fileInput.on('change', function(){
//修改点
if (navigator.userAgent.indexOf('Firefox') >= 0){//判断是否是firefox
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch(e){
alert("!!被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'"); //提示用户怎么设置
return;
}
}
var v = this.fileInput.dom.value;//此时的值是全路径了
this.setValue(v);
this.fireEvent('fileselected', this, v);
}, this);
现在在Ext页面中直接用Ext.getCmp('控件id‘).getValue()就可以得到全路径了