zoukankan      html  css  js  c++  java
  • asp.net支持多文件上传的服务器控件

      在B/S项目中“文件上传”是一个比较常用的功能,也有很多实现的方式,个人比较喜欢用第三方的上传组件uploadify,因为它功能比较强大,配置也比较灵活(多文件、上传进度显示、文件类型、文件大小、文件数量、选择按钮样式设置、上传过程的种种控制、各种事件响应等)。

    以前的使用方式:

    1、注册需要的javascript、CSS

    2、用javascript进行配置

    3、后台处理程序进行上传处理

     

    我是个懒人,觉得这样太麻烦,就将它进行了asp.net服务器控件的封装。

    现在的使用方式:

    不再需要在项目中添加JS、CSS、图片、flash等文件,也不用进行javascript配置,也不用写后台处理程序,只需要直接使用控件即可。

    1、引入Uploadify_Simple_ASPNET.dll

    2、在页面中注册并使用

    View Code
    1 <%@ Register Assembly="Uploadify_Simple_ASPNET" Namespace="Uploadify_Simple_ASPNET"
    2     TagPrefix="cc1" %>
    3 
    4 <cc1:UploadifyControl ID="UploadifyControl1" runat="server" Auto="false" ButtonImage="image.png" ButtonText="浏览" Height="30" Width="80" 
    5             FileSizeLimit=0 FileTypeExts="*.gif; *.jpg; *.png; *.bmp" FileTypeDesc="图片">
    6         </cc1:UploadifyControl>

    3、在web.config配置httpHandlers

    View Code
    <!--必须增加下面的httpHandler-->
        <httpHandlers>
          <add verb="POST,GET" path="Uploadify_Simple_ASPNET/*.ashx" type="Uploadify_Simple_ASPNET.uploadHandler"/>
        </httpHandlers>

    控件属性:

    SWF:SWF核心文件路径(一般不需要设置)

    ButtonText:浏览按钮上显示的文字

    ButtonImage:浏览按钮图片路径

    Width:浏览按钮宽度(单位为像素)

    Height:浏览按钮高度(单位为像素)

    FormData:表单数据

    QueueSizeLimit:队列最多可上传文件数量

    UploadLimit:一次上传文件的数量

    Auto:选择文件后是否自动上传

    Multi:是否为多选

    RemoveCompleted:是否完成后移除序列

    FileSizeLimit:单个文件大小最大值,0为无限制(单位为MB)

    FileTypeDesc:文件描述

    FileTypeExts:上传的文件后缀过滤器(例:*.gif; *.jpg; *.png; *.bmp)

     

    控件方法:

    使用方式:给需要使用该方法的按钮添加onclick属性,属性值为“控件.方法名()”

    View Code
     1             <input type="button" class="shortbutton" id="btnUpload" value="上传" runat="server" />
     2             &nbsp;&nbsp;&nbsp;&nbsp;
     3             <input type="button" class="shortbutton" id="btnCancelUpload" value="取消" runat="server" />
     4             &nbsp;&nbsp;&nbsp;&nbsp;
     5             <input type="button" class="shortbutton" id="btnCancelFirst" value="取消第一个" runat="server" />
     6             &nbsp;&nbsp;&nbsp;&nbsp;
     7             <input type="button" class="shortbutton" id="btnStop" value="停止上传" runat="server" />
     8 
     9 
    10 
    11         //上传全部
    12         btnUpload.Attributes.Add("onclick", UploadifyControl1.Upload());
    13         //取消全部
    14         btnCancelUpload.Attributes.Add("onclick", UploadifyControl1.Cancel());
    15         //取消第一个
    16         btnCancelFirst.Attributes.Add("onclick", UploadifyControl1.CancelFirst());
    17         //停止上传
    18         btnStop.Attributes.Add("onclick", UploadifyControl1.Stop());

    Upload():上传全部

    Cancel():取消全部

    CancelFirst():取消第一个

    Stop():停止上传

     

    控件事件:

    使用方式:订阅控件的上传事件(目前上传事件是静态的)

    View Code
     1         //订阅文件上传事件(目前UploadEvent事件是静态的)
     2         UploadifyControl.UploadEvent += (HttpPostedFile file) =>
     3             {
     4                 //上传操作业务处理   开始
     5                 string uploadPath = HttpContext.Current.Server.MapPath("~\\uploadFiles\\");
     6                 if (!Directory.Exists(uploadPath))
     7                 {
     8                     Directory.CreateDirectory(uploadPath);
     9                 }
    10                 file.SaveAs(uploadPath + file.FileName);
    11                 //上传操作业务处理   结束
    12             };

    UploadEvent:文件上传事件

     

    下面是控件的源码以及示例程序(小弟菜鸟一枚,如有不妥之处,还望各位大牛、大神指教,我会尽力完善)

     控件源码及示例

     

    这个控件只是对uploadify常用功能的封装,有些属性方法并没有封装在内。如果你觉得你需要使用uploadify的某些属性或方法,但控件中没有,你可以:

    1、  留言给我或给我发邮件(qinjiadong369@163.com),我会尽力完善

    2、  直接使用uploadify

    3、  下载我的控件源码,自己进行完善。

    当然我更希望你告诉我你的需求,这样能让这个控件更好一些,让更多的人方便。

    参考:

    http://www.uploadify.com/

    http://www.cnblogs.com/wuhuacong/archive/2012/12/01/2797679.html

     

    如果你觉得文章对你有帮助,可以点击旁边的“推荐”按钮,这样会让更多需要的人有机会看到

  • 相关阅读:
    系统tabbar出现两个tabbar的问题解决方案。
    iOS 开发苹果由http改为https 之后,如果服务器不做相应的修改,那么客户端需要做点更改
    UIAlertController的一些简单实用方法
    ios开发同一个lab显示不同的颜色
    ios开发同一个版本多次提交不想改变版本号的解决方法
    iOS开发textfield的一些方法汇总
    C#笔记
    Shader之性能优化
    Shader之ShaderUI使用方法
    Shader Example
  • 原文地址:https://www.cnblogs.com/Exception/p/2882287.html
Copyright © 2011-2022 走看看