菠菜我最近在搞 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.csdn.net/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.csdn.net/user/zhangyunbo1116/
http://download.csdn.net/source/345961
先来
Ext
写的界面
和对应的
js
代码
,
该导入的你自己倒哦
<
html
xmlns
="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
>
<
meta
http-equiv
="Content-Type"
content
="text/html;charset=gb2312"
>
<!--
包含Ext2.0Css文件
-->
<
link
rel
="stylesheet"
href
="../Ext-2.0/resources/css/ext-all.css"
/>
<!--
包含Ext2.0脚本文件
-->
<
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
>
Demopanel
</
h3
>
<
div
id
=''file-list''
></
div
>
<
div
id
=''show-dialog-btn''
></
div
>
</
div
>
</
body
>
</
html
>
//
JScriptFile
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.ILoglog
=
log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
protected
void
Page_Load(
object
sender,EventArgse)
{
//
我自己有日志,如果你没有去掉就可以.
log.Info(
"
Request.Files.Count=
"
+
Request.Files.Count);
string
jSONString
=
string
.Empty;
try
{
if
(Request.Files.Count
>
0
)
{
HttpPostedFilepostedFile
=
Request.Files[
0
];
string
savePath;
//
请在你的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>
"
;
}
else
log.Info(
"
Request.Files.Count=
"
+
Request.Files.Count);
}
//
try
catch
(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);
}
//
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 .. 直接把里面的英文改成中文就可以 , <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:" 已经被用户中断 "}
到现在 , 就完了 , 祝各位新年快乐 , 万事大吉 , 鼠年发财 …..
