在使用extjs4.2 进行图片文件上传操作时，不能实现选择照片同时进行照片的预览，并且在上传图片时出现错误，没有进入到后台
页面效果：
错误1：在选择图片成功时显示图片的区域不能更改图片
错误2：点击保存时使用form的submit事件操作失败，进入到js追踪
for (i = 0; i < len; ++i) {
el = uploadFields[i].extractFileInput();
formEl.appendChild(el);
uploadEls.push(el);
}
代码来自
页面使用到的代码：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>景点信息（上传预览图片）</title>
<link href="~/Content/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" />
<link href="~/Content/ext-4.2.1.883/resources/css/icon.css" rel="stylesheet" />
<script src="~/Content/ext-4.2.1.883/bootstrap.js"></script>
<script src="~/Content/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
//创建文本上传域
var sltfile = new Ext.form.TextField({
name: ‘upload‘,
id: ‘upload‘,
fieldLabel: ‘文件上传‘,
inputType: ‘file‘,
allowBlank: false,
blankText: ‘请浏览图片‘
});
//表单
var fileUploadForm = Ext.create("Ext.form.FormPanel", {
frame: true,
fileUpload: true,
id: ‘fileUploadForm‘,
title:‘‘,
width: ‘100%‘,
enctype:‘multipart/form-data‘,
height: ‘100%‘,
url: ‘../User/Upload‘,
style: ‘margin:5px‘,
buttonAlign: ‘center‘,
layout:‘form‘,
items: [sltfile,
{
xtype: ‘box‘, //或者xtype: ‘component‘,
width: ‘100%‘, //图片宽度
height: 200, //图片高度
fieldLabel: "预览图片",
id: ‘browseImage‘,
autoEl: {
tag: ‘img‘, //指定为img标签
src: ‘ftp://127.0.0.1//UserFile//78470-106.jpg‘ , //Ext.BLANK_IMAGE_URL,//指定url路径
id: ‘imageBrowse‘
}
}
],
buttons: [{
text: ‘保存‘,
formBind: true,
fileInputEl: ‘../User/Upload‘,
handler:uploadFile
}, {
text: ‘重置‘
}]
});
function uploadFile() {
console.log(‘prepare upload file‘);
var formcmp = this.up(‘form‘);
console.log(formcmp);
var valid = fileUploadForm.isValid();//是否存在可上传的文件
console.log(!valid);
if (!valid) {
Ext.getCmp(‘fileUploadForm‘).setTitle("请选择要上传的文件");
console.log(Ext.getCmp(‘fileUploadForm‘).title);
return;
}
Ext.getCmp(‘fileUploadForm‘).setTitle("");
var photoName = Ext.getCmp(‘upload‘).getValue();
console.log(‘文件上传的虚拟路径：‘+photoName);
// Ext.DomHelper.append(Ext.getBody(), formSpec);
Ext.getCmp(‘browseImage‘).src = photoName;
var files = Ext.get(‘upload‘).dom.files;
console.log(files);
console.log(‘执行操作出现于异常----‘);
Ext.getCmp(‘fileUploadForm‘).getEl().action = ‘../User/Upload‘;
Ext.getCmp(‘fileUploadForm‘).getEl().method = "POST";
fileUploadForm.submit({
url: ‘../User/Upload‘,
method: "POST",
timeout: 1000,
waitTitle: ‘提示‘,
waitMsg: ‘请稍后，文件上传中.....‘,
params: {
photoName: photoName
},
success: function (form, action) {
console.log("文件上传成功。");
Ext.Msg.alert(‘Tips‘, "<font color=‘green‘>" + action.result.msg + "</font>");
},
});
}
//窗体
var win = new Ext.Window({
title: ‘上传文件窗口‘,
width: 476,
height: 374,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
closeAction:‘hide‘,
items: fileUploadForm
});
win.show();
});
</script>
ext-4.2.1.883 代码存在问题（云存储，备份，记录失败的情况）：
原文：http://www.cnblogs.com/cscode/p/5297836.html