原文地址: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. Xcode7.1环境下上架iOS App到AppStore 流程③(Part 三)

    前言部分 part三 部分主要讲解 Xcode关联绑定发布证书的配置.创建App信息.使用Application Loader上传.ipa文件到AppStore 一.Xcode配置发布证书信息 1)给 ...

  2. java JSP(原创新手可进)

    一. 同等编程方式jsp与asp.net的不同 app需要做一个简单网站,和几个用户推广链接,所以涉及到web这块开发,原本昨天想直接使用asp.net来做,但是之后放弃了这个想法,因为数据访问接口都 ...

  3. Eclipse代码和xml文件的智能提示

    一.代码智能提示 Windows → Preferences → Java→ Editor → Content Assist 将 Auto activation delay(ms): 改为 0 将 A ...

  4. 理解Java对象的交互：时钟显示程序

    实现: 结构: 对象:时钟  - 对象:小时                 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...

  5. 【JS基础】算法

    Math 对象 Math.sqrt() //返回一个数的平方根

  6. json简单使用

    web工程中如何将大量数据从服务器端传送到浏览器一直是很重要的一个问题. 其中一个解决方法是在服务器端将将数据封装成json格式,然后传给前台.废话不多说,下面讲干货. 1.要用json必须下载一个库 ...

  7. 当Eclipse报版本低时的处理方法

    http://blog.sina.com.cn/s/blog_6f0c85e10100v6pv.html 更新到API12的时候出过问题,这一次难免又会出现了,不过我的版本还真全啊,哇咔咔~   这里 ...

  8. Android应用项目中BaseAdapter、SimpleAdapter和ArrayAdapter中的三种适配器

    一.写在前面: 本次我们来讲解一下Android应用中三个适配器:BaseAdapter.SimpleAdapter和ArrayAdapter.其中常见的是BaseAdapter,也是个人推荐使用的适 ...

  9. git分布式版本控制玩法

    git分布式版本控制玩法 Git distributed version control play github的配置安装步骤:1.下载git bash(从http://www.git-scm.com ...

  10. ASP.NET MVC 5 02 - ASP.NET MVC 1-5 各版本特点

    参考书籍:<ASP.NET MVC 4 高级编程>.<ASP.NET MVC 5 高级编程>.<C#高级编程(第8版)>.<使用ASP.NET MVC开发企业 ...