asp.net 文件批量选取，批量上传，带进度条，uploadify3.2

最近朋友请帮忙写一个批量上传图片的程序，之前在做一个系统的时候由于时间有限没有多研究，这次花了些时间，总算是可以了。

在现实文件上传进度的同时还要将这些数据上传到文件夹或者数据库，所以就需要异步执行。在asp.net中没有如winform中的进度条，而大多数都是使用js/jq或者flash等等。

这里我介绍的是我用过最好的uploadfily，在网上看了好多例子，在使用上都有些问题，所以也就自己贴上自己刚刚研究好的。

uploadfily在我写这篇博客时已经更新到3.2了，可以去它的官网下载http://www.uploadify.com/download/

这里也有我写的一个例子，大家可以下载来看看，http://pan.baidu.com/share/link?shareid=531190&uk=2416893122

好了，，废话不多说，开始说明。

1.新建一个页面，用于显示文件浏览，上传，取消，进度条等等的页面，无后台代码处理，页面中需要引入下载下来的js，css，swf等文件。

上传界面 
    
  
   <title>文件上传</title>
     <link href="scripts/uploadify.css" type="text/css" rel="Stylesheet" />
   <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="scripts/swfobject.js"></script>
   <script type="text/javascript" src="scripts/jquery.uploadify.min.js"></script>
   <script type="text/javascript">

       $(function () {
       //以下两句代码用于处理session丢失
           var auth = "<% = Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>";
           var ASPSESSID = "<%= Session.SessionID %>";
        
           $('#fileupload').uploadify({
               'swf': 'scripts/uploadify.swf',
               'uploader': 'Upload.aspx',
               'multi': true,      //是否允许多选
               'auto': false,       //是否允许自动上传
               'fileTypeExts': '*.jpg;*.gif;*.png;',
               'fileTypeDesc': 'Image Files (.JPG, .GIF, .PNG, )',
               'queueID': 'queue',
               'queueSizeLimit': 300,      //同时上传数量
               'uploadLimit': 10000,        //一次浏览器课上成总数量
               'fileSizeLimit': '10MB',   //单个文件大小设置
               'buttonText': '选择文件',
               'formData': { 'ASPSESSID': ASPSESSID, 'AUTHID': auth },
               'onSelect': function (file) {
                   $('#fileupload').uploadifySettings('formData', { 'ASPSESSID': ASPSESSID, 'AUTHID': auth });
                   alert(formDate);
               },
               'width': 100,//文件选择按钮大小
             'height':22,
               'removeCompleted': true,
               'removeTimeout':0.1,    //上传完成后自动消失时间/秒
               'onQueueComplete': function (file) {         //所有文件上传完成时触发此事件
                   alert('上传完毕!');
               }

           });
       });

   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div style=" text-align:center; width:400px; margin:0 auto">
   <input type="file" name="filedata" id="fileupload" /><br/>
   <input type="button" id="upload" value="上传吧" οnclick="javascript:$('#fileupload').uploadify('upload','*')" />
   <input type="button" id="cancel" value="取消一条" οnclick="javascript:$('#fileupload').uploadify('cancel')" />
    <input type="button" id="cancelall" value="取消全部" οnclick="javascript:$('#fileupload').uploadify('cancel','*')" />
    <div id="queue">
    </div>
   </div>
   </form>
</body> 
    
  

在以上代码中，我已经写好了取消一条和全部取消的方法。在参数列表中，他的取消参数是cancel，而全部取消是destroy，但是全部取消使用这个参数确实错了，然后仔细看看了上传，其实一样的道理，这里的上传是上传所有列队，而他使用的方法uploadify('upload','*')，而单条取消是uploadify('cancel')，很显然全部和单条只是一个“*”号参数的有无而已。
2.然后便是上传文件的处理，新建了一个Upload.aspx的页面，界面是空的，文件处理都在后台代码中

文件处理 
    
  
protected void Page_Load(object sender, EventArgs e)
   {
          HttpPostedFile file = Request.Files["filedata"];
           string uploadpath = Server.MapPath("~/Upload/");
           if (file != null)
           {
               if (!Directory.Exists(uploadpath))
               {
                   Directory.CreateDirectory(uploadpath);
               }
               
               file.SaveAs(uploadpath+file.FileName);
           }
   } 
    
  

至于文件要如何处理就看个人了。
3.其实就上面两步已经能完成基本上传了，但是，我们在上传文件的时候往往会用到session，在firefox，Google，360等浏览器中，每次使用之前的session都会被新建，其中复杂的也就不多说，大家姑且理解为丢失吧（注：非真正丢失）。一旦session丢失，那么我们在处理文件的时候就会出问题。那么要如何解决这些浏览器不会丢失session呢？

4.于是乎新建了一个全局应用程序类（Global）来解决。在Global文件中加入以下代码。

Global 
    
  
 protected void Application_BeginRequest(object sender, EventArgs e)
   {
       /* we guess at this point session is not already retrieved by application so we recreate cookie with the session id... */
       try
       {
           string session_param_name = "ASPSESSID";
           string session_cookie_name = "ASP.NET_SessionId";

           if (HttpContext.Current.Request.Form[session_param_name] != null)
           {
               UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
           }
           else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
           {
               UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
           }
       }
       catch
       {
       }

       try
       {
           string auth_param_name = "AUTHID";
           string auth_cookie_name = FormsAuthentication.FormsCookieName;

           if (HttpContext.Current.Request.Form[auth_param_name] != null)
           {
               UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
           }
           else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
           {
               UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
           }

       }
       catch
       {
       }
   }

   private void UpdateCookie(string cookie_name, string cookie_value)
   {
       HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
       if (null == cookie)
       {
           cookie = new HttpCookie(cookie_name);
       }
       cookie.Value = cookie_value;
       HttpContext.Current.Request.Cookies.Set(cookie);
   }
       
    
  

5.最后，在我们上传界面js之前加上两句代码就可以了。

session处理 
    
  
    $(function () {
       //以下两句代码用于处理session丢失
           var auth = "<% = Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>";
           var ASPSESSID = "<%= Session.SessionID %>";
        
           $('#fileupload').uploadify({
               'swf': 'scripts/uploadify.swf',
               'uploader': 'Upload.aspx',
               'multi': true,      //是否允许多选
               'auto': false,       //是否允许自动上传
               'fileTypeExts': '*.jpg;*.gif;*.png;',
               'fileTypeDesc': 'Image Files (.JPG, .GIF, .PNG, )',
               'queueID': 'queue',
               'queueSizeLimit': 300,      //同时上传数量
               'uploadLimit': 10000,        //一次浏览器课上成总数量
               'fileSizeLimit': '10MB',   //单个文件大小设置
               'buttonText': '选择文件',
               'formData': { 'ASPSESSID': ASPSESSID, 'AUTHID': auth },
               'onSelect': function (file) {
                   $('#fileupload').uploadifySettings('formData', { 'ASPSESSID': ASPSESSID, 'AUTHID': auth });
                   alert(formDate);
               },
               'width': 100,//文件选择按钮大小
             'height':22,
               'removeCompleted': true,
               'removeTimeout':0.1,    //上传完成后自动消失时间/秒
               'onQueueComplete': function (file) {         //所有文件上传完成时触发此事件
                   alert('上传完毕!');
               } 
    
  

好了，以上就完成了文件批量选取，批量上传切带进度条的功能了，自己在稍稍美化也能用于自己的网页中了
之前也研究了两个版本的uploadfily，但是，，目前这个3.2的对浏览器的支持算是最好的，就firefox，Google，360是没问题，，至于IE，IE8以下是不行了。IE9似乎有问题。没继续深入研究了。