[转]ExtJs⼊门之filefield：⽂件上传的配置+结合Ajax完美实现⽂
件上传的a。。。
作⽂⼀个ExtJs的⼊门汉⼦，学习起来的确是⽐较费劲的事情，不过如今在这样⼀个⽹络资源如此丰富的时代，依然不是那么难了的。基本上都是Copy过来加以部分改造即可实现⾃⼰想要的功能，加之如今的第三⽅开发者也⼤发慈悲地写出了API的帮助⽂档以及⽰例⽂档。关于ExtJs内的⽂件上传，将从以下⼏个⽅⾯进⾏展开讲解：
⼀、ExtJs⽂件上传版⾯的布局以及配置
因为ExtJs的⽂件上传组件filefield是基于form表单提交数据的，所以我们需要创建Ext.form.Panel，页⾯布局及其配置代码如下所⽰：
001.
002.
003.
ExtJs的⽂件上传004.005.006.007.008.009.010.011.012.013.014.]);015. 016.017.018.019.020.021.022.023.024.025.026.027.028.029.030.031.032.033.034.035.036.037.038.039.040.041.042.043.044.045.046.047.048.049.050.051.052.053.054.055.056.057.058.059.
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: {
//装载的时候添加监听事件
108.109.
110.
114.115.
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(\".\") +
form.submit({
url: '/Pic/Upload_Ajax.aspx',
waitMsg: '图⽚正在上传，请耐⼼等待....',
success: function (fp, o) {
msg('图⽚上传成功', o.message);},
failure: function (fp, o) {
msg(\"错误提⽰\}});
} else {
msg('错误提⽰', '只允许上传jpg|JPG⽂件!');}}}}, {
text: '取 消',
handler: function () {
this.up('form').getForm().reset();}}]});
⼆、编写Upload_Ajax.aspx的相关代码 获取表单数据
核⼼代码如下所⽰：
01.protected void Page_Load(object sender, EventArgs e)02.{03.HttpPostedFile file = Request.Files[\"fileUpload\"];04.//图⽚描述05.06. 07.08.
if (file != null){
string FileDesc = Request[\"picDesc\"];
09.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.}
//上传图⽚路径
string PicSavePath = string.Format(\"/images/upload/{0}ry{
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();
三、运⾏效果图
⽂件上传页⾯配置效果图
图1：⽂件上传页⾯配置效果图
⽂件上传过程中的提⽰效果图
图2：⽂件上传过程中的提⽰效果图
