首页 > Web开发 > 详细

[转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

时间：2016-04-15 18:17:24 阅读：206 评论：0 收藏：0 [点我收藏+]

标签：

原文地址:http://www.stepday.com/topic/?459

作文一个ExtJs的入门汉子，学习起来的确是比较费劲的事情，不过如今在这样一个网络资源如此丰富的时代，依然不是那么难了的。基本上都是Copy过来加以部分改造即可实现自己想要的功能，加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档。关于ExtJs内的文件上传，将从以下几个方面进行展开讲解：

一、ExtJs文件上传版面的布局以及配置

因为ExtJs的文件上传组件filefield是基于form表单提交数据的，所以我们需要创建Ext.form.Panel，页面布局及其配置代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ExtJs的文件上传</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="/css/ext-all.css" />
<script type="text/javascript" src="/js/ext-all.js"></script>
<!-- Shared -->
<link rel="stylesheet" type="text/css" href="/css/example.css" />
<script type="text/javascript" language="javascript">
Ext.require([
‘Ext.form.field.File‘,
‘Ext.form.Panel‘,
‘Ext.window.MessageBox‘
]);
 
Ext.onReady(function () {
//定义一个消息提示方法
var msg = function (title, msg) {
Ext.Msg.show({
title: title,
msg: msg,
minWidth: 200,
modal: true,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
};
//创建form表单
Ext.create(‘Ext.form.Panel‘, {
renderTo: ‘divUpload‘,//form表单的承载对象
width: 600, //表单宽度
frame: true,
title: ‘图片上传‘,//表单名称
bodyPadding: ‘10 10 0‘, //表单内项目距离边框的值
//配置默认属性
defaults: {
anchor: ‘90%‘,
allowBlank: false,
msgTarget: ‘side‘,
labelWidth: 100
},
//表单内的项目配置
items: [{
xtype: ‘textfield‘,
fieldLabel: ‘图片说明‘,
name: ‘picDesc‘//这个是文本框的name值，post表单数据的时候，用于Request["picDesc"] 获取数据之用
}, {
xtype: ‘filefield‘,
id: ‘fileUpload‘,
emptyText: ‘请选择一个图片文件‘,
fieldLabel: ‘图片路径‘,
name: ‘fileUpload‘,
buttonText: ‘浏览‘,
buttonConfig: {
iconCls: ‘upload-icon‘
},
//添加事件
listeners: {
//装载的时候添加监听事件
"render": function () {
//这里尤其要注意的是使用Ext.get(‘upload‘),而不是Ext.getCmp(‘upload‘),否则不起效果，若使用后者，则只有当文本框的内容改变的时候，才会触发change 事件
Ext.get(‘fileUpload‘).on("change", function () {
debugger
var uploadFileName = Ext.getCmp(‘fileUpload‘).getValue();
//只允许上传jpg|JPG文件
if (uploadFileName.substring(uploadFileName.lastIndexOf(".") + 1).toLowerCase() != "jpg" || uploadFileName.substring(epath.lastIndexOf(".") + 1).toLowerCase() != "JPG") {
msg(‘Error‘, ‘只允许上传pg|JPG文件!‘);
}
})
}
}
}],
buttons: [{
text: ‘上 传‘,
handler: function () {
var form = this.up(‘form‘).getForm();
//验证表单
if (form.isValid()) {
//获取所选择文件的名称
var epath = form.findField("fileUpload").getValue();
//只允许上传jpg|JPG件
if (epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() == "jpg" || epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() == "JPG") {
form.submit({
url: ‘/Pic/Upload_Ajax.aspx‘,
waitMsg: ‘图片正在上传，请耐心等待....‘,
success: function (fp, o) {
msg(‘图片上传成功‘, o.message);
},
failure: function (fp, o) {
msg("错误提示", o.message);
}
});
} else {
msg(‘错误提示‘, ‘只允许上传jpg|JPG文件!‘);
}
}
}
}, {
text: ‘取 消‘,
handler: function () {
this.up(‘form‘).getForm().reset();
}
}]
});
 
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divUpload">
</div>
</form>
</body>
</html>

二、编写Upload_Ajax.aspx的相关代码获取表单数据

核心代码如下所示：

protected void Page_Load(object sender, EventArgs e)
{
HttpPostedFile file = Request.Files["fileUpload"];
//图片描述
string FileDesc = Request["picDesc"];
 
if (file != null)
{
//上传图片路径
string PicSavePath = string.Format("/images/upload/{0}", file.FileName);
try
{
file.SaveAs(MapPath(PicSavePath));
}
catch (Exception eg)
{
Response.Write("{success:false,flag:0,message:‘"+eg.ToString()+"!‘}");
}
Response.Write("{success:true,flag:0,message:‘文件"+file.FileName+"上传成功!‘}");
}
else
{
Response.Write("{success:false,flag:0,message:‘参数配置错误!‘}");
}
Response.End();
}