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

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

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

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

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

001.<html xmlns="http://www.w3.org/1999/xhtml">
002.<head runat="server">
003.<title>ExtJs的文件上传</title>
004.<!-- ExtJS -->
005.<link rel="stylesheet" type="text/css" href="/css/ext-all.css" />
006.<script type="text/javascript" src="/js/ext-all.js"></script>
007.<!-- Shared -->
008.<link rel="stylesheet" type="text/css" href="/css/example.css" />
009.<script type="text/javascript" language="javascript">
010.Ext.require([
011.'Ext.form.field.File',
012.'Ext.form.Panel',
013.'Ext.window.MessageBox'
014.]);
015. 
016.Ext.onReady(function () {
017.//定义一个消息提示方法
018.var msg = function (title, msg) {
019.Ext.Msg.show({
020.title: title,
021.msg: msg,
022.minWidth: 200,
023.modal: true,
024.icon: Ext.Msg.INFO,
025.buttons: Ext.Msg.OK
026.});
027.};
028.//创建form表单
029.Ext.create('Ext.form.Panel', {
030.renderTo: 'divUpload',//form表单的承载对象
031.width: 600, //表单宽度
032.frame: true,
033.title: '图片上传',//表单名称
034.bodyPadding: '10 10 0', //表单内项目距离边框的值
035.//配置默认属性
036.defaults: {
037.anchor: '90%',
038.allowBlank: false,
039.msgTarget: 'side',
040.labelWidth: 100
041.},
042.//表单内的项目配置
043.items: [{
044.xtype: 'textfield',
045.fieldLabel: '图片说明',
046.name: 'picDesc'//这个是文本框的name值,post表单数据的时候,用于Request["picDesc"] 获取数据之用
047.}, {
048.xtype: 'filefield',
049.id: 'fileUpload',
050.emptyText: '请选择一个图片文件',
051.fieldLabel: '图片路径',
052.name: 'fileUpload',
053.buttonText: '浏览',
054.buttonConfig: {
055.iconCls: 'upload-icon'
056.},
057.//添加事件
058.listeners: {
059.//装载的时候添加监听事件
060."render": function () {
061.//这里尤其要注意的是使用Ext.get('upload'),而不是Ext.getCmp('upload'),否则不起效果,若使用后者,则只有当文本框的内容改变的时候,才会触发change 事件
062.Ext.get('fileUpload').on("change", function () {
063.debugger
064.var uploadFileName = Ext.getCmp('fileUpload').getValue();
065.//只允许上传jpg|JPG文件
066.if (uploadFileName.substring(uploadFileName.lastIndexOf(".") + 1).toLowerCase() != "jpg" || uploadFileName.substring(epath.lastIndexOf(".") + 1).toLowerCase() != "JPG") {
067.msg('Error', '只允许上传pg|JPG文件!');
068.}
069.})
070.}
071.}
072.}],
073.buttons: [{
074.text: '上 传',
075.handler: function () {
076.var form = this.up('form').getForm();
077.//验证表单
078.if (form.isValid()) {
079.//获取所选择文件的名称
080.var epath = form.findField("fileUpload").getValue();
081.//只允许上传jpg|JPG件
082.if (epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() == "jpg" || epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() == "JPG") {
083.form.submit({
084.url: '/Pic/Upload_Ajax.aspx',
085.waitMsg: '图片正在上传,请耐心等待....',
086.success: function (fp, o) {
087.msg('图片上传成功', o.message);
088.},
089.failure: function (fp, o) {
090.msg("错误提示", o.message);
091.}
092.});
093.} else {
094.msg('错误提示', '只允许上传jpg|JPG文件!');
095.}
096.}
097.}
098.}, {
099.text: '取 消',
100.handler: function () {
101.this.up('form').getForm().reset();
102.}
103.}]
104.});
105. 
106.});
107.</script>
108.</head>
109.<body>
110.<form id="form1" runat="server">
111.<div id="divUpload">
112.</div>
113.</form>
114.</body>
115.</html>

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

核心代码如下所示:

01.protected void Page_Load(object sender, EventArgs e)
02.{
03.HttpPostedFile file = Request.Files["fileUpload"];
04.//图片描述
05.string FileDesc = Request["picDesc"];
06. 
07.if (file != null)
08.{
09.//上传图片路径
10.string PicSavePath = string.Format("/images/upload/{0}", file.FileName);
11.try
12.{
13.file.SaveAs(MapPath(PicSavePath));
14.}
15.catch (Exception eg)
16.{
17.Response.Write("{success:false,flag:0,message:'"+eg.ToString()+"!'}");
18.}
19.Response.Write("{success:true,flag:0,message:'文件"+file.FileName+"上传成功!'}");
20.}
21.else
22.{
23.Response.Write("{success:false,flag:0,message:'参数配置错误!'}");
24.}
25.Response.End();
26.}

三、运行效果图

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

图1:文件上传页面配置效果图

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

图2:文件上传过程中的提示效果图

上一篇:2018-2019-1 20189221 《Linux内核原理与分析》第八周作业


下一篇:排序函数中比较函数cmp的理解