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

最新推荐文章于 2021-06-07 15:30:11 发布

lifewahaha

最新推荐文章于 2021-06-07 15:30:11 发布

阅读量3.2k

点赞数

分类专栏： asp.net HTML fineuploader 文章标签： javascript .net ajax asp.net fineuploader

本文链接：https://blog.csdn.net/imcodefarmer/article/details/40304557

版权

HTML 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

asp.net

1 篇文章 0 订阅

订阅专栏

fineuploader

1 篇文章 0 订阅

订阅专栏

做的一个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

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
asp.net 使用纯jquery上传控件 fineuploader实现多文件上传

做的一个asp.net项目系统中需要用到多文件上传的功能，但是原生的FileUploader不支持一次选择多个文件上传，用户要求一次性选择多个文件一次性批量上传。于是乎在网上找了好多所谓多文件上传的控件，大部分都是基于flash的上传控件，配置非常不灵活，还有的就是简单的重复性选择，然后一次性循环上传，也够麻烦的。最终老师给介绍了一款纯粹的js编写的上传控件-fineuploader 发现
复制链接

扫一扫