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

  • Post author:
  • Post category:其他


做的一个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。由于系统所上传的文件名正好是英文和数字的组合,所以也就没有过多的探索。



版权声明:本文为lifewahaha原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。