从今天起我会和大家一块来学习ExtJs的典型操作,前面我写了一些ExtJs的文章,那个系列主要是系统的来介绍Ext如何使用。但是我们知道如果仅仅那样来介绍会遗漏很多实用的内容,因此我今后会继续写一些常用的Ext操作方面的内容,暂且叫做"ExtJs典型用法"系列吧。
今天我们首先看一下Ext中如何上传文件。我们知道在传统的html中有file组件(也就是type为file的input组件),但是我们也可以看到在Ext中是没有相应的组件的。那么我们如何来上传文件呢?在Ext中要完成上传其实很简单,只需要设置FormPanel的fileUpload属性和textfield的inputType属性即可。好,废话不多说,直接看代码吧:
前台代码:
- <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>
后台代码:
- 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();
- }
- }
- }
运行效果: