ExtJs 4.1以Ajax方式上传文件
ExtJs 4.1 File Upload in Ajax fashion
我有一个需求,需要使用ExtJs以ajax方式上传文件。我的表单已经有了许多其他字段,如文本、文本区域等。我已经在父表单中的一个单独表单中包含了我的文件字段。此外,该表单有一个上传按钮,可以在单击它时执行功能。在该按钮处理程序中,我正在提交包含文件字段的表单。它就像一种魅力。唯一的问题是页面将被刷新。我不想那样。我需要以ajax的方式进行上传。
使用ExtJs可能吗?我知道,当我们使用纯html/javascript时,通过将表单目标设置为iframe,我们可以很容易地防止页面刷新。
我们有这样的解决方案吗?
请给这个问题一些想法或解决方案
这是我的代码片段:
{
xtype: 'form',
items: [
{
xtype: 'filefield',
name: 'file',
fieldLabel: '<b>Presentation</b>',
msgTarget: 'side',
labelAlign: 'top',
width: 300,
allowBlank : true,
id: 'file',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
},
{
xtype: 'panel',
id: 'selectdFileName',
html: '<b>' + presenationFile + '</b>'
},
{
xtype: 'panel',
html: '<br/>'
},
{
xtype: 'button',
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
form.target = 'upload_target';
if (form.isValid()) {
form.submit({
url: contextPath + '/app/uploadFile',
params: {
id: formId
},
waitMsg: 'Uploading presentation...',
success: function(form, action) {
var respJson = Ext.JSON
.decode(action.response.responseText);
Ext.getCmp('selectdFileName').update(
"<b>" + respJson.path + "</b>");
}
});
}
}
}]
}
在上面的代码中,另一个包含可能其他字段的表单包含了这个表单
让我知道这是否能让你更好地理解我的问题。
在您的上传按钮中,我会尝试以下操作:
//store the vals
var vals = form.getValues();
//then, in form.submit...
form.submit({
params: {
values: vals
}
});
Json应该为您处理所有的对象转换(因此您将有一个带有vals对象的不同字段的"values"对象(例如:name:'frank',id:'19381'等))
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 什么's是连接供应商js文件的最佳方式
- 将大数组(字符串和类型数组的混合物)存储到blob或文件中/从blob或文件检索大数组的最佳方式
- 将不同上传的文件显示为缩略图或任何其他方式
- 通过javascript以编程方式将文件插入HTML输入
- 用触摸和观察的方式触摸修改过的文件
- 我无法以某种方式在数据库中POST文件
- 以编程方式生成Adobe文件的预览
- 我可以在Node中以编程方式更改.js文件的module.exports中的JSON对象吗
- 从任意行X开始读取超长文件的最快方式
- 我们跟踪JavaScript文件的方式是否包含在其他网站中
- 将文件夹中的所有图像包括在阵列中的最佳方式是什么
- 以串行方式加载多个Javascript文件
- 通过http传输大文件(>100MB)的最佳方式
- 我如何在谷歌chrome中调试一个以编程方式注入的JS文件
- 使用普通JS频繁升级JSON文件的首选方式
- IE6兼容的方式,通过Javascript将上传的文件发送到API
- 使用标记和 (TXT) .dat 文件中追加信息的最佳方式.从窗体
- 是否有任何事件/方式我们可以知道文件何时完成下载
- 以编程方式查看从另一个文件加载的 html 元素的内容