原文地址: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.}

三、运行效果图

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

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

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

  1. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Linux Shell：根据指定的文件列表 或 map配置，进行文件位置转移

    读取配置文件,进行文件位置转移 在whenb.csv中指定了需要从/home/root/cf/下移除到/home/root/cf_wh/下文件列表,whenb.csv中包含记录如下: enb- enb ...

  3. selenium -文件上传的实现 -对于含有input element的上传

    使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...

  4. 【Java EE 学习 72 上】【数据采集系统第四天】【增加调查logo】【文件上传】【动态错误页指定】【上传限制】【国际化】

    增加logo的技术点:文件上传,国际化 文件上传的功能在struts2中是使用文件上传拦截器完成的. 1.首先需要在页面上添加一个文件上传的超链接. 点击该超链接能够跳转到文件上传页面.我给该表单页面 ...

  5. 两种文件上传的实现－Ajax和form+iframe

    前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...

  6. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

  7. 【Java EE 学习 22 上】【文件上传】【目录打散】【文件重命名】

    1.文件上传概述 (1)使用<input type="file">的方式来声明一个文件域. (2)表单提交方式一定要是post方式才行 (3)表单属性enctype 默 ...

  8. php文件上传参考配置与大文件上传

      PHP用超级全局变量数组$_FILES来记录文件上传相关信息的,在php文件上传之前,可通过调节php.ini中相关配置指令,来控制上传相关细节. 1.file_uploads=on/off   ...

  9. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

随机推荐

  1. java集合你了解多少？

    用了java集合这么久,还没有系统的研究过java的集合结构,今天亲自画了下类图,总算有所收获. 一.所有集合都实现了Iterable接口. Iterable接口中包含一个抽象方法:Iterator& ...

  2. Delphi_03_Delphi_Object_Pascal_基本语法_01

    这次是一个基本语法的第一部分,包括变量.变量初始化.常量.运算符.字符串等内容. { 本程序演示 Delphi Pascal 的基本语法 1.变量及变量的初始化 2.常量 3.运算符 3. 4. } ...

  3. 服务发现与健康监测框架Consul-DNS转发的应用

    关于Consul Consul是一个提供服务注册与发现,健康监测,Key/Value存储以及多数据中心存储的分布式框架.官网地址是https://www.consul.io/,公司初步应用后我们老大觉 ...

  4. extend

    这段时间在写一个预览图片的插件, 被我老大说了无数次了,不多说啥,说多了都是泪 昨天看着我的代码他说你用了extend,那你知道是什么意思吗 我只知道是扩展的意思,瞬间觉得自己弱爆了 真的 然后今天看 ...

  5. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  6. sqlite索引的原理

    引言 这篇文章,里面讲到对于一个41G大小.包含百万条记录的数据库进行查询操作,如果利用了索引,可以把操作耗时从37s降到0.2s. 那么什么是索引呢?利用索引可以加快数据库查询操作的原理是什么呢? ...

  7. 阶段一：用Handler和Message实现计时效果及其中一些疑问

    “阶段一”是指我第一次系统地学习Android开发.这主要是对我的学习过程作个记录. 本来是打算继续做天气预报的优化的,但因为某些原因,我要先把之前做的小应用优化一下.所以今天就插播一下用Handle ...

  8. Listview的Item中有CheckBox、Button等的焦点处理

    ListView的item布局中有CheckBox.Button等会获取焦点的控件会抢走焦点,造成ListView的item点击事件相应不了. 解决方法:控件设置 android:clickable= ...

  9. 玩转Podfile

    前言 经常使用CocoaPods来管理iOS项目中的第三方库,但是我们要使用CocoaPods来管理第三方库,前提是要写好Podfile文件,通过这个文件来配置第三方库与项目之间的依赖.版本等信息. ...

  10. Dagger2 (二) 进阶篇

    一.作用域Scope 之前了解RoboGuice的时候,我们知道它默认给我们提供了几个注解,ContextSingleton和Singleton,但是Dagger2更为灵活,只有javax包中提供的S ...