原文地址: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. PHP如何实现网址伪静态

    Apache的 mod_rewrite是比较强大的,在进行网站建设时,可以通过这个模块来实现伪静态. 主要步骤如下: 1.检测Apache是否开启mod_rewrite功能     可以通过php提供 ...

  2. apache.commons.io.IOUtils: 一个很方便的IO工具库(比如InputStream转String)

    转换InputStream到String, 比如 //引入apache的io包 import org.apache.commons.io.IOUtils; ... ...String str = IO ...

  3. spring源码：ApplicationContext的增强功能（li）

    ApplicationContext作为资源加载器:ApplicationContext作为事件发布者: Java原生提供了事件发布机制------EventObject对象作为发布的事件,Event ...

  4. 千万pv大型web系统架构，学习从点滴开始

     架构,刚开始的解释是我从知乎上看到的.什么是架构?有人讲, 说架构并不是一 个很 悬 乎的 东西 , 实际 上就是一个架子 , 放一些 业务 和算法,跟我们的生活中的晾衣架很像.更抽象一点,说架构其 ...

  5. GJM : Unity3D HIAR -【 快速入门 】 一、简介

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  6. Hibernnate延迟加载策略（这么详细你还看不懂）

    好久没有认真写过博客了,今天就好好的写一篇吧!!!!!!!!! 当Hibernate 从数据库中加载某个对象(例如:Dept对象)时,如果同时自动加载所有的关联的某个对象(例如:Emp对象),而程序实 ...

  7. jQuery的性能优化

    原文链接:http://www.colotu.com/html/gcs/6.html 现在越来越多的人应用jQuery了,有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquer ...

  8. UI篇（初识君面）

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  9. .a静态库构架合成

    一.如果类库生成的构架和对应设备的构架不一致,会链接报错 如果项目中使用类库后,遇到形似Undefined symbols for architecture x86_64(x86_64架构下有未定义的 ...

  10. android universal-image-loader的使用

    全局配置 android-image-loader的使用 public class Application extends Application { @Override public void on ...