本文介绍了一种使用ExtJS框架进行文件上传的方法，包括前端界面的设计及后端处理流程，并提供了详细的代码示例。
菠菜我最近在搞 Ext <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,7)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,7, this);" id="clickeyekey7" onmousemove="kwM(7);" oncontextmenu="return false;">开发</nobr>的邮件系统</clk>, 其中就有用到如何上传文件这个大众化的问题,经过我一上午的研究和查资料终于搞定,现在决定把代码共享出来,方便大家,呵呵.
纯属个人原创,所以转贴请注明出处:
http://blog.youkuaiyun.com/zhangyunbo1116
当然,我使用的是 ExtJs论坛中的一个组件, <clk>非常感叹<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,0)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,0, this);" id="clickeyekey0" onmousemove="kwM(0);" oncontextmenu="return false;">作者</nobr>的牛比哄哄</clk>. 作者的大名叫: MaximGB .. 呵呵,现在我就为你到来如何开发这样的上传文件. 基本结构是:
Ext 前台实现界面,后台采用 Asp.Net 开发. Jsp 我会,但就是 php 偶不会,可是在老外的论坛,php可是王者哦,呵呵!
<clk>需要<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,2)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,2, this);" id="clickeyekey2" onmousemove="kwM(2);" oncontextmenu="return false;">下载</nobr>的</clk> Ext 上传文件的组件扩展:
http://max-bazhenov.com/dev/upload-dialog-2.0/index.php
进入开发作者的页面,下载最新的上传组件包, 如果不是最新的扩展包,有可能作者改过的bug你没有修正,这样,岂不是很惨哦!
现在进入正题,我在这里只提供一个最最基本的 demo <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,6)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,6, this);" id="clickeyekey6" onmousemove="kwM(6);" oncontextmenu="return false;">程序</nobr></clk>, 当然需要你知道的前提知识是,如何使用 Ext, 如何在自己的页面中加入 js 文件,如果这个你都不会,我真的是很无语,你还是先开看 Ext 的基本教程吧,然后再看我这篇文章.
下载后的压缩包解压,<clk>你就会发现<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,10)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,10, this);" id="clickeyekey10" onmousemove="kwM(10);" oncontextmenu="return false;">文件</nobr>不是很多</clk>,我只提两个关键的文件:
Ext.ux.UploadDialog.js 这个就是实现功能的 js文件,但是是格式化的,方便感兴趣的人自己阅读的 js 代码文件,当你发布应用的时候,建议不要引入该文件,而是引入下面一个文件.
Ext.ux.UploadDialog.packed.js 是压缩好的,引入这个文件,<clk>可以提高<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,1)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,1, this);" id="clickeyekey1" onmousemove="kwM(1);" oncontextmenu="return false;">用户</nobr>的访问速度</clk>.
Ext.ux.UploadDialog.css 这是样式文件,应该导入.
如果你嫌麻烦,想直接看真实的东东,那就到这里下载,里面还有我汉化的一个小小的js,文件,只要覆盖: Ext.ux.UploadDialog.packed.js 就 可以了.
http://download.youkuaiyun.com/user/zhangyunbo1116/
http://download.youkuaiyun.com/source/345961
先来 Ext 写的界面 和对应的js 代码, 该导入的你自己倒哦
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title><clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,12)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,12, this);" id="clickeyekey12" onmousemove="kwM(12);" oncontextmenu="return false;">测试</nobr>如何使用Ext2.0</clk></title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><!--包含Ext2.0Css文件--><linkrel="stylesheet"href="../Ext-2.0/resources/css/ext-all.css"/><!--包含Ext2.0脚本文件--><scripttype="text/javascript"src="../Ext-2.0/adapter/ext/ext-base.js"></script><scripttype="text/javascript"src="../Ext-2.0/ext-all.js"></script><scripttype="text/javascript"src="js/TestFormUpload.js"></script><!--上传组件使用的链接--><linkrel="stylesheet"href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css"/><scripttype="text/javascript"src="Ext.ux.UploadDialog/UploadDialog/Ext.ux.UploadDialog.packed.js"></script></head><body><divid=''demo-panel''><h3>Demopanel</h3><divid=''file-list''></div><divid=''show-dialog-btn''></div></div></body></html>
//
JScriptFile
Ext.onReady(
function
()
...
{
Ext.QuickTips.init();
varbtnShow=newExt.Button(...{text:''上传文件'',listeners:...{click:function(btnThis,eventobj)...{dialog=newExt.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.ILoglog=log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);protectedvoidPage_Load(objectsender,EventArgse)...{//我自己有日志,如果你没有去掉就可以.log.Info("Request.Files.Count="+Request.Files.Count);stringjSONString=string.Empty;try...{if(Request.Files.Count>0)...{HttpPostedFilepostedFile=Request.Files[0];stringsavePath;//请在你的d盘下要建立一个upload这样的测试目录.如果没有,会出错的//可不要告诉我你连D盘都没有,如果这样,算你狠...savePath=@"D:/upload/";savePath+=Path.GetFileName(postedFile.FileName);//<clk>检查是否在<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,16)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,16, this);" id="clickeyekey16" onmousemove="kwM(16);" oncontextmenu="return false;">服务器</nobr>上已经存在用户上传的同名文件</clk>if(File.Exists(savePath))...{File.Delete(savePath);}log.Debug(savePath);postedFile.SaveAs(savePath);jSONString="<clk>{success:true,message:''上传<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,15)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,15, this);" id="clickeyekey15" onmousemove="kwM(15);" oncontextmenu="return false;">成功</nobr>''}</clk>";}elselog.Info("Request.Files.Count="+Request.Files.Count);}//trycatch(Exceptionex)...{jSONString="{success:false,message:''上传失败,可能因为上传文件过大导致!''}";log.Info("上传文件出错:"+ex.Message);log.Info("<clk>堆栈<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,11)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,11, this);" id="clickeyekey11" onmousemove="kwM(11);" oncontextmenu="return false;">信息</nobr>是:</clk>"+ex.StackTrace);}//catchfinally...{log.Debug("jSONString="+jSONString);}//输出上传文件后的后台相应信息,//在这里请你注意删除你对应页面的所有html脚本,只需要保留page头就可以Response.Write(jSONString);Response.Flush();}//pageload}
//
class关于汉化问题,开发的作者说的很详细, 我就很简单, 直接编辑了Ext.ux.UploadDialog.packed.js . 在这个页面的最后由一个对象Ext.ux.UploadDialog.Dialog.prototype. i18n .. 直接把里面的英文改成中文就可以,<clk>如果各位还信得过偶的英文<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,5)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,5, this);" id="clickeyekey5" onmousemove="kwM(5);" oncontextmenu="return false;">水平</nobr></clk>,可以拷贝偶的翻译的东东,下载覆盖.
可以到这里下载:
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:"不支持上传该类型文件.<br/>请选择下列类型的文件集合 {1}",note_queued_to_upload:"上传的队列。",note_processing:"上传中...",note_upload_failed:"当前请求过多，服务器正忙，不能及时响应或者因特网服务器发生错误。",note_upload_success:"成功。",note_upload_error:"上传文件出错。",note_aborted:"已经被用户中断"}
到现在,就完了,祝各位新年快乐,万事大吉,鼠年发财…..
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
