【原创】Ext 上传文件,前后台实现, Asp.net 代码

【原创】Ext 上传文件

菠菜我最近在搞 Ext 开发的邮件系统, 其中就有用到如何上传文件这个大众化的问题,经过我一上午的研究和查资料终于搞定,现在决定把代码共享出来,方便大家,呵呵.

纯属个人原创,所以转贴请注明出处:
http://blog.csdn.net/zhangyunbo1116

当然,我使用的是 ExtJs论坛中的一个组件, 非常感叹作者的牛比哄哄. 作者的大名叫: MaximGB ..  呵呵,现在我就为你到来如何开发这样的上传文件. 基本结构是:
Ext 前台实现界面,后台采用 Asp.Net 开发. Jsp 我会,但就是 php 偶不会,可是在老外的论坛,php可是王者哦,呵呵!
需要下载的 Ext 上传文件的组件扩展:
http://max-bazhenov.com/dev/upload-dialog-2.0/index.php
进入开发作者的页面,下载最新的上传组件包, 如果不是最新的扩展包,有可能作者改过的bug你没有修正,这样,岂不是很惨哦!
现在进入正题,我在这里只提供一个最最基本的 demo 程序, 当然需要你知道的前提知识是,如何使用 Ext, 如何在自己的页面中加入 js 文件,如果这个你都不会,我真的是很无语,你还是先开看 Ext 的基本教程吧,然后再看我这篇文章.

下载后的压缩包解压,你就会发现文件不是很多,我只提两个关键的文件:
Ext.ux.UploadDialog.js   这个就是实现功能的 js文件,但是是格式化的,方便感兴趣的人自己阅读的 js 代码文件,当你发布应用的时候,建议不要引入该文件,而是引入下面一个文件.
Ext.ux.UploadDialog.packed.js  是压缩好的,引入这个文件,可以提高用户的访问速度.
Ext.ux.UploadDialog.css  这是样式文件,应该导入.
如果你嫌麻烦,想直接看真实的东东,那就到这里下载,里面还有我汉化的一个小小的js,文件,只要覆盖: Ext.ux.UploadDialog.packed.js 就 可以了.

http://download.csdn.net/user/zhangyunbo1116/
http://download.csdn.net/source/345961

先来 Ext 写的界面 和对应的js 代码, 该导入的你自己倒哦

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 测试如何使用Ext 2.0 title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
    
     < link  rel ="stylesheet"   href ="../Ext-2.0/resources/css/ext-all.css"   />
    
    
     < script  type ="text/javascript"  src ="../Ext-2.0/adapter/ext/ext-base.js" > script >
     < script  type ="text/javascript"  src ="../Ext-2.0/ext-all.js" > script >
     < script  type ="text/javascript"  src ="js/TestFormUpload.js" > script >
    
    
     < link  rel ="stylesheet"   href ="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css"   />     
     < script  type ="text/javascript"  src ="Ext.ux.UploadDialog/UploadDialog/Ext.ux.UploadDialog.packed.js" > script >
    
head >
< body >
  < div  id ='demo-panel' >
   < h3 > Demo panel h3 >
         < div  id ='file-list' > div >
         < div  id ='show-dialog-btn' > div >
  div >
body >
html >

 

//  JScript File
Ext.onReady( function ()  ... {
Ext.QuickTips.init();  
  var btnShow = new Ext.Button(...{
        text:'上传文件',
        listeners:...{
            click:function(btnThis,eventobj)...{
               dialog = new Ext.ux.UploadDialog.Dialog(...{
                  url: 'UploadFile.aspx',
                  reset_on_hide: false,
                  allow_close_on_upload: true,
                  upload_autostart: true
                });
                dialog.show('show-button');
            }
        }
  });
   btnShow.render("show-dialog-btn");
} );  // Ext.onReady

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.IO;  // 注意,导入

public   partial   class  PagesExtMail_AspNet_UploadFile : System.Web.UI.Page
... {
    log4net.ILog log = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
    
    protected void Page_Load(object sender, EventArgs e)
    ...{
        //我自己有日志,如果你没有去掉就可以.
        log.Info("Request.Files.Count=" + Request.Files.Count);
        string jSONString = string.Empty;
        try
        ...{
            if (Request.Files.Count > 0)
            ...{
                HttpPostedFile postedFile = Request.Files[0];
                string savePath ;
                //请在你的d 盘下要建立一个upload 这样的测试目录.如果没有,会出错的
                //可不要告诉我你连D 盘都没有,如果这样,算你狠...
                savePath = @"D:/upload/";
                savePath += Path.GetFileName(postedFile.FileName);

                //检查是否在服务器上已经存在用户上传的同名文件
                if (File.Exists(savePath))
                ...{
                    File.Delete(savePath);
                }
                log.Debug(savePath);
                postedFile.SaveAs(savePath);
                jSONString = "{success:true,message:'上传成功'}";
            }
            else
                log.Info("Request.Files.Count=" + Request.Files.Count);
        }//try
        catch (Exception ex)
        ...{
            jSONString = "{success:false,message:'上传失败,可能因为上传文件过大导致!'}";
            log.Info("上传文件出错:"+ex.Message);
            log.Info("堆栈信息是 :" + ex.StackTrace);
        }//catch
        finally
        ...{
            log.Debug("jSONString=" + jSONString);
            
        }
        //输出上传文件后的后台相应信息, 
        //在这里请你注意删除你对应页面的所有html 脚本,只需要保留page 头就可以
        Response.Write(jSONString);
        Response.Flush();

    }//pageload
} // class

关于汉化问题,开发的作者说的很详细, 我就很简单, 直接编辑了Ext.ux.UploadDialog.packed.js  . 在这个页面的最后由一个对象Ext.ux.UploadDialog.Dialog.prototype. i18n .. 直接把里面的英文改成中文就可以,如果各位还信得过偶的英文水平,可以拷贝偶的翻译的东东,下载覆盖.

可以到这里下载:

 

var p=Ext.ux.UploadDialog.Dialog.prototype;p.i18n={title:"上传文件",state_col_title:"状态",state_col_width:70,filename_col_title:"文件名",filename_col_width:230,note_col_title:"备注",note_col_width:150,add_btn_text:"添加",add_btn_tip:"添加文件到上传队列。",remove_btn_text:"删除",remove_btn_tip:"从上传队列删除文件。",reset_btn_text:"重置",reset_btn_tip:"重置队列。",upload_btn_start_text:"开始上传",upload_btn_stop_text:"中断上传",upload_btn_start_tip:"上传文件对列。",upload_btn_stop_tip:"停止上传。",close_btn_text:"关闭",close_btn_tip:"关闭上传对话框。",progress_waiting_text:"等待...",progress_uploading_text:"上传中: {0} 的 {1} 文件集合成功。",error_msgbox_title:"错误",permitted_extensions_join_str:",",err_file_type_not_permitted:"不支持上传该类型文件.
请选择下列类型的文件集合 {1}",note_queued_to_upload:"上传的队列。",note_processing:"上传中...",note_upload_failed:"当前请求过多，服务器正忙，不能及时响应或者因特网服务器发生错误。",note_upload_success:"成功。",note_upload_error:"上传文件出错。",note_aborted:"已经被用户中断"}

 

 

到现在,就完了,祝各位新年快乐,万事大吉,鼠年发财…..

 

 

补充：

有个网友问我如何检测关闭事件，即　close 事件，　我后来看了下文档：

uploadstop - 上传文件停止
uploadcomplete - 上传文件结束

请注意两者的区别。　上传停止并不代表上传就结束。如批量上传３个文件是，当上传第一个文件时由于

出异常，于是停止就会触发　uploadstop ，而上传结束，就代表所有的三个文件全部上传上去了。

 

发现并没有，可后来想了一下，自己真笨。　

直接在　close 链接里面，加个　onclick 事件即可，但是这要改源码，很简单，自己试下就ｏｋ了

点击本链接看图片　　

https://p-blog.csdn.net/images/p_blog_csdn_net/zhangyunbo1116/EntryImages/20081221/ext_close.PNG