您的位置：首页 > Web前端 > JQuery

asp.net 使用纯jquery上传控件 fineuploader实现多文件上传

2014-10-20 18:28 961 查看
做的一个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。由于系统所上传的文件名正好是英文和数字的组合，所以也就没有过多的探索。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript .net ajax asp.net fineuploader
相关文章推荐
新的分享
章节导航