ExtJs典型用法之文件上传
2013-05-31 17:17
190 查看
从今天起我会和大家一块来学习ExtJs的典型操作，前面我写了一些ExtJs的文章，那个系列主要是系统的来介绍Ext如何使用。但是我们知道如果仅仅那样来介绍会遗漏很多实用的内容，因此我今后会继续写一些常用的Ext操作方面的内容，暂且叫做"ExtJs典型用法"系列吧。
今天我们首先看一下Ext中如何上传文件。我们知道在传统的html中有file组件（也就是type为file的input组件），但是我们也可以看到在Ext中是没有相应的组件的。那么我们如何来上传文件呢？在Ext中要完成上传其实很简单，只需要设置FormPanel的fileUpload属性和textfield的inputType属性即可。好，废话不多说，直接看代码吧：
前台代码：
[xhtml] view
plaincopy
<html>
<head>
<link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script>
<mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var fpFileUpload=new Ext.FormPanel({
id:'fpFileUpload',
frame:true,
fileUpload:true,
//url:'Default.aspx',
items:[
{
xtype:'textfield',
allowBlank:false,
fieldLabel:'选择文件',
inputType:'file',
name:'fileName'
}
],
buttonAlign:'center',
buttons:[
{
text:'上传',
handler:function(){
if(fpFileUpload.form.isValid()){
fpFileUpload.form.submit({
method:'post',
url:'Default.aspx',
waitMsg:'文件上传中...',
success: function() {
Ext.Msg.alert("系统提示", "文件上传成功！");
},
failure: function() {
Ext.Msg.alert("系统提示", "文件上传失败！");
}
});
}else{
Ext.Msg.alert("系统提示","请选择文件后再上传！");
}
}
},
{
text:'取消',
handler:function(){
winFielUpload.hide();
}
}
]
});
var winFielUpload=new Ext.Window({
id:'win',
title:'文件上传',
//****renderTo:'divWindow',//对于window不要使用renderTo属性，只需要调用show方法就可以显示，添加此属性会难以控制其位置
width:350,
height:100,
layout:'fit',
autoDestory:true,
modal:true,
closeAction:'hide',
items:[
fpFileUpload
]
});
window.winFielUpload=winFielUpload;
});
function showWindow(){
winFielUpload.show();
}
// --></mce:script>
</head>
<body>
<div id="divWindow"></div>
<input type="button" value="上传文件" onclick="showWindow();">
</body>
</html>
后台代码：
[c-sharp] view
plaincopy
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Serialization;
namespace FileUpload
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (Request.Files.Count == 0)
{
return;
}
else
{
HttpPostedFile file = Request.Files[0];
if (file.ContentLength > 0 && !string.IsNullOrEmpty(file.FileName))
{
file.SaveAs(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));
//FileInfo fileInfo=new FileInfo(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));
//JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
Response.Write("{success:true}");//前台就是通过json中success的true活false来判断是否成功的，切记！
}
}
}
catch (Exception ex)
{
Response.Write("{success:false}");
}
Response.End();
}
}
}
运行效果：
今天我们首先看一下Ext中如何上传文件。我们知道在传统的html中有file组件（也就是type为file的input组件），但是我们也可以看到在Ext中是没有相应的组件的。那么我们如何来上传文件呢？在Ext中要完成上传其实很简单，只需要设置FormPanel的fileUpload属性和textfield的inputType属性即可。好，废话不多说，直接看代码吧：
前台代码：
[xhtml] view
plaincopy
<html>
<head>
<link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script>
<mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var fpFileUpload=new Ext.FormPanel({
id:'fpFileUpload',
frame:true,
fileUpload:true,
//url:'Default.aspx',
items:[
{
xtype:'textfield',
allowBlank:false,
fieldLabel:'选择文件',
inputType:'file',
name:'fileName'
}
],
buttonAlign:'center',
buttons:[
{
text:'上传',
handler:function(){
if(fpFileUpload.form.isValid()){
fpFileUpload.form.submit({
method:'post',
url:'Default.aspx',
waitMsg:'文件上传中...',
success: function() {
Ext.Msg.alert("系统提示", "文件上传成功！");
},
failure: function() {
Ext.Msg.alert("系统提示", "文件上传失败！");
}
});
}else{
Ext.Msg.alert("系统提示","请选择文件后再上传！");
}
}
},
{
text:'取消',
handler:function(){
winFielUpload.hide();
}
}
]
});
var winFielUpload=new Ext.Window({
id:'win',
title:'文件上传',
//****renderTo:'divWindow',//对于window不要使用renderTo属性，只需要调用show方法就可以显示，添加此属性会难以控制其位置
width:350,
height:100,
layout:'fit',
autoDestory:true,
modal:true,
closeAction:'hide',
items:[
fpFileUpload
]
});
window.winFielUpload=winFielUpload;
});
function showWindow(){
winFielUpload.show();
}
// --></mce:script>
</head>
<body>
<div id="divWindow"></div>
<input type="button" value="上传文件" onclick="showWindow();">
</body>
</html>
后台代码：
[c-sharp] view
plaincopy
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Serialization;
namespace FileUpload
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (Request.Files.Count == 0)
{
return;
}
else
{
HttpPostedFile file = Request.Files[0];
if (file.ContentLength > 0 && !string.IsNullOrEmpty(file.FileName))
{
file.SaveAs(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));
//FileInfo fileInfo=new FileInfo(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));
//JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
Response.Write("{success:true}");//前台就是通过json中success的true活false来判断是否成功的，切记！
}
}
}
catch (Exception ex)
{
Response.Write("{success:false}");
}
Response.End();
}
}
}
运行效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJs典型用法之文件上传
- Extjs4文件上传
- 利用jsp+Extjs实现动态显示文件上传进度
- Extjs3.3+SWFUpload2.2 实现多文件上传
- Extjs 扩展Htmleditor，支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能
- Extjs+C# 实现文件上传
- Extjs文件上传
- c# + extjs 上传excel文件并保存到数据库
- 【Extjs】上传文件
- ExtJS 如何验证上传文件类型
- Spring MVC中使用ExtJS上传文件
- EXTJS文件上传点提交是报如下错误：missing ) in parenthetical
- [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- jsp+Extjs实现动态显示文件上传进度
- extjs 上传文件到数据库
- 创建可执行的 JAR 文件包--制作一个可执行的 JAR 文件包来发布你的程序是 JAR 文件包最典型的用法
- EXTjs 同时支持文件上传和图片上传的htmleditor
- 关于Extjs MVC模式上传文件的简单方式
- ExtJS 中文件上传控件
- Extjs 文件上传