[转]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.
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示例的更多相关文章
- 上传文件的三种方式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 ...
随机推荐
- c++ builder TIdHttp 获取不到cookie
用c++ builder 的TIdHttp组件Get一个ASP.Net MVC服务器的一个页面,获取页面中Cookie信息,修改后Post到服务器上去. 在本地调试的时候可以获取到,部署到服务器上就获 ...
- PHP中this,self,parent三个关键字
this,self,parent三个关键字从字面上比较好理解,分别是指这.自己.父亲. this是指向当前对象的指针(姑且用C里面的指针来看吧)self是指向当前类的指针parent是指向父类的指针( ...
- Hibernate关联映射 映射文件的配置
一:多对一单向关联 首先我们必须创建两个实体类 例如:Dept类 public class Dept { private Integer deptNo; private String dName; p ...
- html标签学习
1. 标题 : <h1> - <h6> 2. 分割线 : <hr> 3. 加粗: <strong> 4. 斜体: <em> <i> ...
- file命令
命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...
- ListView和Adapter数据适配器的简单介绍
ListView 显示大量相同格式数据 常用属性: listSelector listView每项在选中.按下等不同状态时的Drawable divider ...
- 【代码笔记】iOS-UILable高度自适应(sizeWithFont)
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- linux php编译安装
1.下载php安装包 http://cn2.php.net/get/php-5.5.36.tar.gz/from/this/mirror 默认情况下Nginx和PHP他俩之间是一点感觉没有的.Apac ...
- 【转】浅谈JavaScript、ES5、ES6
什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...
- 不重新编译php安装配置eAccelerator
eAccelerator属于一个免费的开源php加速.优化.编译和动态缓存项目,原理和apc类似,都是通过缓存php编译后的opcode代码来提高php脚本的执行性能,而且eAccelerator本身 ...