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

系统 2512 0

菠菜我最近在搞 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:" 已经被用户中断 "}

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

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论