做的一个asp.net项目系统中需要用到多文件上传的功能,但是原生的FileUploader不支持一次选择多个文件上传,用户要求一次性选择多个文件一次性批量上传。于是乎在网上找了好多所谓多文件上传的控件,大部分都是基于flash的上传控件,配置非常不灵活,还有的就是简单的重复性选择,然后一次性循环上传,也够麻烦的。
最终老师给介绍了一款纯粹的js编写的上传控件-fineuploader 发现其功能真的好强大,正是系统所需求的!
下面主要说一下使用方法,不对控件本身做介绍。
下面是fineuploader的目录结构
使用方法:
1.fileupload.aspx页中引入
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
<link href="../fineuploader-3.7.1/fineuploader-3.7.1.css" rel="stylesheet" type="text/css" />
<script src="../fineuploader-3.7.1/iframe.xss.response-3.7.1.js" type="text/javascript"></script>
<script src="../fineuploader-3.7.1/jquery.fineuploader-3.7.1.js" type="text/javascript"></script>
html代码:
将下面的代码段copy到<body></body>标签中
<%-- <upload:control ID="mycontrol" runat=server />--%>
<!-- jQuery
====================================================================== -->
<%--<script src="http://code.jquery.com/jquery-latest.js"></script>--%>
<script src="../fineuploader-3.7.1/jquery-latest.js" type="text/javascript"></script>
<!-- Fine Uploader JS
====================================================================== -->
<%--<script src="assets/fineuploader.js"></script>--%>
<script src="../fineuploader-3.7.1/jquery.fineuploader-3.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#fine-uploader').fineUploader({
request: {
endpoint: '/uploadcontroller/UploadHandler.ashx'
}
});
});
</script>
<!-- Fine Uploader CSS
====================================================================== -->
<%--<link href="assets/fineuploader.css" rel="stylesheet">--%>
<link href="../fineuploader-3.7.1/fineuploader-3.7.1.css" rel="stylesheet" type="text/css" />
<!-- Fine Uploader DOM Element
====================================================================== -->
<div style="width:100%; margin:0 auto ;">
<table align="center" style="border: thick solid #F0F0F0; width:100%;">
<tr>
<td colspan="2" style=" background:url('/images/n_r_t.gif'); height:37px">
<div align="left" class="table_header">
<a href="/index.aspx" target="_parent"> 首页</a> >> 成果管理 >> 上传防灾减灾科技成果奖对应的文档
</div>
</td>
</tr>
<tr>
<td><div id="fine-uploader"></div></td>
<td><p>注:上传的文档名必须以所对应的项目编号命名!可以上传的文档类型有*.doc|*.docx|*.pdf.</p></td>
</tr>
</table>
</div>
<!-- Fine Uploader template
====================================================================== -->
后台处理浏览器传上来的文件:
后台我是添加了一个一般处理程序来处理上传的文件,因为fineuploader 是通过ajax的方式访问后台处理程序的,所以一般处理程序是最佳选择了。
处理文件名:UploadHandler.ashx
代码:
;
private string path = @"~\uploads\" ;
public void ProcessRequest(HttpContext context)
{
try
{
context.Response.ContentType = "text/plain";
HttpPostedFile file = context.Request.Files["qqfile"];
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path+GetCurrentYear()+"\\")+ file.FileName);
context.Response.Write(new JavaScriptSerializer().Serialize(new Msg() { success = true }));
}
catch (Exception ex)
{
context.Response.Write(new JavaScriptSerializer().Serialize(new Msg() { success = false }));
}
}
这里需要有一个返回值,用来返回处理结果,如果文件接受失败或者程序内部发生了异常情况,则会返回false输出流,然后fineuploader获取到后用来提示用户文件是否上传成功了。因此创建了下面一个内部类:
public class Msg
{
public bool success { get; set; }
}
通过序列化这个内部类的实例,返回给浏览器端,这样就实现了上传结果的反馈功能。
以上就是在我的.net项目中引入fineuploader的大致步骤,经测试除了不能上传中文文件名外,其他一切ok。由于系统所上传的文件名正好是英文和数字的组合,所以也就没有过多的探索。