原文地址: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. ASP.NET MVC 利用IRouteHandler, IHttpHandler实现图片防盗链

    你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你的服务器带宽.下面这种方法可以告诉你如何在ASP.NET MVC中实现一个自定义Ro ...

  2. C#中级-开机自动启动程序

    一.前言 关于C#开机自动启动程序的方法,网上出现比较多的是修改注册表: 1. HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion ...

  3. MVC 传值

    1.ViewBag    Controller:ViewBag.Message = "Hello, Word";    View:@ViewBag.Message   注:View ...

  4. asp.net DataTable导出Excel 自定义列名

    1.添加引用NPOI.dll 2.cs文件头部添加 using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.IO; 3.代码如 ...

  5. 使用命令 gradle uploadArchives 的异常： Unable to initialize POM pom-default.xml: Failed to validate POM for project

    在使用:gradle uploadArchives 命令对项目进行上传maven时,常常遇到如下报错: 这时候要仔细的检查一下build.gradle文件中的dependencies内容,很多时候是由 ...

  6. 开源物联网框架ServerSuperIO 3.0正式发布（C#），跨平台：Win&Win10 Iot&Ubuntu&Ubuntu Mate，一套设备驱动跨平台挂载，附：开发套件和教程。

    3.0版本主要更新内容: 1.增加跨平台能力:Win&Win10 Iot&Ubuntu&Ubuntu Mate 2.统一设备驱动接口:可以一套设备驱动,跨平台挂载运行,降低人力 ...

  7. jstack+top定位性能问题

    定位性能问题,尤其是cpu使用率过高时,经常需要查找cpu消耗较高的线程,然后查看其堆栈,从而进入代码定位问题. 该场景下, jstack+top是一种非常经典的方式. jstack+top:   1 ...

  8. 前端之HTML知识点整理

    一.html概述 htyper text markup language  即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言 ...

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

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

  10. http参数的封装(后台接受参数的场景)

    场景 不管是任何web框架作为一个web的开发人员必须要搞明白control层如何接受各种参数. 下面就根据我们公司的系统架构(nutz)来进行一下场景描述.各位小伙伴也可以根据这些 场景自己去总结一 ...