[转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
原文地址:http://www.stepday.com/topic/?459
-
作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的。基本上都是Copy过来加以部分改造即可实现自己想要的功能,加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档。关于ExtJs内的文件上传,将从以下几个方面进行展开讲解:
一、ExtJs文件上传版面的布局以及配置
因为ExtJs的文件上传组件filefield是基于form表单提交数据的,所以我们需要创建Ext.form.Panel,页面布局及其配置代码如下所示:
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.varmsg =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.OK026.});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: 100041.},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.debugger064.varuploadFileName = 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.varform =this.up('form').getForm();077.//验证表单078.if(form.isValid()) {079.//获取所选择文件的名称080.varepath = 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.protectedvoidPage_Load(objectsender, EventArgs e)02.{03.HttpPostedFile file = Request.Files["fileUpload"];04.//图片描述05.stringFileDesc = Request["picDesc"];06.07.if(file !=null)08.{09.//上传图片路径10.stringPicSavePath =string.Format("/images/upload/{0}", file.FileName);11.try12.{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.else22.{23.Response.Write("{success:false,flag:0,message:'参数配置错误!'}");24.}25.Response.End();26.}三、运行效果图

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

图2:文件上传过程中的提示效果图
[转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例的更多相关文章
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux Shell:根据指定的文件列表 或 map配置,进行文件位置转移
读取配置文件,进行文件位置转移 在whenb.csv中指定了需要从/home/root/cf/下移除到/home/root/cf_wh/下文件列表,whenb.csv中包含记录如下: enb- enb ...
- selenium -文件上传的实现 -对于含有input element的上传
使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...
- 【Java EE 学习 72 上】【数据采集系统第四天】【增加调查logo】【文件上传】【动态错误页指定】【上传限制】【国际化】
增加logo的技术点:文件上传,国际化 文件上传的功能在struts2中是使用文件上传拦截器完成的. 1.首先需要在页面上添加一个文件上传的超链接. 点击该超链接能够跳转到文件上传页面.我给该表单页面 ...
- 两种文件上传的实现-Ajax和form+iframe
前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...
- 配置php.ini实现PHP文件上传功能
本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...
- 【Java EE 学习 22 上】【文件上传】【目录打散】【文件重命名】
1.文件上传概述 (1)使用<input type="file">的方式来声明一个文件域. (2)表单提交方式一定要是post方式才行 (3)表单属性enctype 默 ...
- php文件上传参考配置与大文件上传
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的,在php文件上传之前,可通过调节php.ini中相关配置指令,来控制上传相关细节. 1.file_uploads=on/off ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
随机推荐
- PHP如何实现网址伪静态
Apache的 mod_rewrite是比较强大的,在进行网站建设时,可以通过这个模块来实现伪静态. 主要步骤如下: 1.检测Apache是否开启mod_rewrite功能 可以通过php提供 ...
- apache.commons.io.IOUtils: 一个很方便的IO工具库(比如InputStream转String)
转换InputStream到String, 比如 //引入apache的io包 import org.apache.commons.io.IOUtils; ... ...String str = IO ...
- spring源码:ApplicationContext的增强功能(li)
ApplicationContext作为资源加载器:ApplicationContext作为事件发布者: Java原生提供了事件发布机制------EventObject对象作为发布的事件,Event ...
- 千万pv大型web系统架构,学习从点滴开始
架构,刚开始的解释是我从知乎上看到的.什么是架构?有人讲, 说架构并不是一 个很 悬 乎的 东西 , 实际 上就是一个架子 , 放一些 业务 和算法,跟我们的生活中的晾衣架很像.更抽象一点,说架构其 ...
- GJM : Unity3D HIAR -【 快速入门 】 一、简介
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- Hibernnate延迟加载策略(这么详细你还看不懂)
好久没有认真写过博客了,今天就好好的写一篇吧!!!!!!!!! 当Hibernate 从数据库中加载某个对象(例如:Dept对象)时,如果同时自动加载所有的关联的某个对象(例如:Emp对象),而程序实 ...
- jQuery的性能优化
原文链接:http://www.colotu.com/html/gcs/6.html 现在越来越多的人应用jQuery了,有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquer ...
- UI篇(初识君面)
我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
- .a静态库构架合成
一.如果类库生成的构架和对应设备的构架不一致,会链接报错 如果项目中使用类库后,遇到形似Undefined symbols for architecture x86_64(x86_64架构下有未定义的 ...
- android universal-image-loader的使用
全局配置 android-image-loader的使用 public class Application extends Application { @Override public void on ...