Javascript与asp.net 实现Ajax多文件无刷新上传(转)

转自: http://www.cnblogs.com/huacn/archive/2007/07/16/ajax_upload_javascript_js_wushuaxing_jquery.html
这几天在等着上班，闲来无事，就写了一个无刷新的上传功能，这个上传只是实现局部刷新，我已经把方法都整理好，可以随意添加多个上传控件，只要调用一个方法就可以了，为了便于阅读我没有把JS独立出来，以后真正用到项目上的时候再提出来，我在每个方法上面都写了注视，具体可以看代码部分，现在一直在用JQuery，它提供的方法太好用的，剩了很多事。
此方法主要是通过iFrame调用上传页的控件来实现的，具体请看下面的代码。





无刷新上传主要的HTML代码（upload.html）：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >
< title > AjaxUpload </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< script  type ="text/javascript"  src ="scripts/jquery.js" ></ script >
< script  type ="text/javascript"  src ="scripts/interface.js" ></ script >
< style  type ="text/css"  media ="all" >
* {
    margin : 0 ;
    padding : 0 ;
}

img { border : none ; }

ul {
    list-style-type : none ;
}

ul li {
    padding : 2px 4px ;
}

body {
    font-family :  宋体, 黑体,verdana, Arial ;
    font-size : 12px ;
    color : #333 ;
    background : #DDDDDD ;
    margin : 30px ;
    padding : 0 ;
}

.box {
    border : 1px solid #CCC ;
    background : #FFF ;
    padding : 8px ;
    margin : 5px ;
    clear : both ;
}

.title  {
    background : #F0F0F0 ; padding : 5px ;
    font-weight : bold ;
}

.tooltip {
    background : #F0F0F0 ;
    border-color : #bbb ;
}

.tooltip h1  {
    color : #A8DF00 ;
    font-family :  微软雅黑,黑体,宋体,verdana, Arial ;
}

.titlebutton {
    float : right ;
}

.uploading {
    background : #FFF ;
    color : #444 ;
    text-align : left ;
    width : 500px ;
    padding : 4px ;
}

.image {
    border : 1px solid #ddd ;
    margin : 2px ;
    padding : 1px ;
    display : inline ;
    width : 300px ;
}

.uploadcontrol  {
    margin : 4px 0 ;
    border-bottom : 1px solid #F0F0F0 ;
}
</ style >
< script  type ="text/javascript" >
    
     $(document).ready( function (){          
           for ( var  i = 0 ;i < 5 ;i ++ )
          {
             uploadcreate($( " #uploadbox " ),i);
          }
    });
     
      var  hideDiv  =   function (idName){
         $( " # " + idName).fadeOut( " fast " );
     };
     
      // 是否显示上传后的图片
      var  isshowpic  =   true ;  
      var  uploadshowpic  =   function (el){
         isshowpic  =   ! (isshowpic);
          if (isshowpic)
         {
             el.html( " 图片显示关闭 " );
         }
          else
         {
             el.html( " 图片显示开启 " );
         }
     };
     
      // 载入中的GIF动画
     var  loadingUrl  =   " images/ajax-loader.gif " ;
    
     // 选择文件后的事件,iframe里面调用的
     var  uploading  =   function (imgsrc,itemid){
         var  el  =  $( " #uploading " + itemid);
        $( " #ifUpload " + itemid).fadeOut( " fast " );
        el.fadeIn( " fast " );
        el.html( " <img src=' " + loadingUrl + " ' align='absmiddle' /> 上传中 " );
         return  el;
    };
    
     // 重新上传方法    
     var  uploadinit  =   function (itemid){
        currentItemID  ++ ;
        $( " #uploading " + itemid).fadeOut( " fast " , function (){
             $( " #ifUpload " + itemid).fadeIn( " fast " );
             $( " #panelViewPic " + itemid).fadeOut( " fast " );
        });
               
    };
    
     // 上传时程序发生错误时，给提示，并返回上传状态
     var  uploaderror  =   function (itemid){
        alert( " 程序异常， " + itemid + " 项上传未成功。 " );
        uploadinit();
    };
    
     // 上传成功后的处理
     var  uploadsuccess  =   function (newpath,itemid){
        $( " #uploading " + itemid).html( " 文件上传成功. <a href='javascript:void(0);' οnclick='uploadinit( " + itemid + " );'>[重新上传]</a> " );
         if (isshowpic)
        {
            $( " #panelViewPic " + itemid).html( " <a href=' " + newpath + " ' title='点击查看大图' target='_blank'><img src=' " + newpath + " ' alt='' style='width:300px;' /></a> " );        
            $( " #panelViewPic " + itemid).fadeIn( " fast " );
        }
    };
    
    
     var  currentItemID  =   0 ;   // 用于存放共有多少个上传控件了
     // 创建一个上传控件
     var  uploadcreate  =   function (el,itemid){
        currentItemID  ++ ;
         if (itemid  ==   null )
        {
            itemid  =  currentItemID;
        }  
         var  strContent  =   " <div class='uploadcontrol'><iframe src=\ " upload.aspx ? id = " +itemid+ " \ "  id=\ " ifUpload " +itemid+ " \ "  frameborder=\ " no\ "  scrolling=\ " no\ "  style=\ " width:400px; height:28px;\ " ></iframe> " ;
        strContent  +=   " <div class=\ " uploading\ "  id=\ " uploading " +itemid+ " \ "  style=\ " display:none;\ "  ></div> " ;
        strContent  +=   " <div class=\ " image\ "  id=\ " panelViewPic " +itemid+ " \ "  style=\ " display:none;\ " ></div></div> " ;
        el.append(strContent);
    };
     
</ script >

</ head >

< body >

< div  id ="tipbox"  class ="box tooltip" >
     < a  href ="#"  onclick ="hideDiv('tipbox');" > [关闭] </ a >
     < div  class ="content" >
         < h1 > AjaxUpload - 多文件无刷新上传源代码 v1.0 </ h1 >
         < p > 作者:李华顺  < a  href ="http://huacn.cnblogs.com"  target ="_blank" > http://huacn.cnblogs.com </ a ></ p >
     </ div >  
</ div >
< div  id ="toolbox"  class ="tooltip box" >
     < a  href ="#"  onclick ="uploadcreate($('#uploadbox'));" > 添加一个新上传控件 </ a >   < a  href ="#"  onclick ="uploadshowpic($(this));" > 图片显示关闭 </ a >
</ div >
< div  id ="uploadbox"  class ="box" >
    
</ div >

</ body >

</ html >

上传功能的页面代码（upload.aspx）：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " upload.aspx.cs "  Inherits = " upload "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 上传 </ title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < script  type ="text/javascript"  src ="scripts/jquery.js" ></ script >
     < script  type ="text/javascript"  src ="scripts/interface.js" ></ script >
     < style  type ="text/css" >
        * {  margin : 0 ;  padding : 0 ;   }
        
     </ style >
     < script  type ="text/javascript" >
        
         var  uploadSelect  =   function (el){
            el.fadeOut( " show " );        
            parent.uploading(document.getElementById( " <%=file1.ClientID %> " ).value,' <%= itemID  %> ');
            $( " #<%=frmUpload.ClientID %> " ).submit();
        };
         
     </ script >
</ head >
< body >
     < form  runat ="server"  id ="frmUpload"  method ="post"  enctype ="multipart/form-data" >
         < input  type ="file"  runat ="server"  id ="file1"  size ="40"  onchange ="uploadSelect($(this));"   />         
     </ form >
</ body >
</ html >

上传功能的服务端代码（upload.aspx.cs）

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.IO;

public  partial  class  upload : System.Web.UI.Page
{
     string  picPath  =   "" ;
     string  picServer  =   " /upload " ;
     protected   string  itemID  =   "" ;
     protected   void  Page_Load( object  sender, EventArgs e)
    {

         if  (Request.QueryString[ " id " ]  !=   null )
        {
            itemID  =  Request.QueryString[ " id " ];
        }
  
         if  (IsPostBack)
        {
            picPath  =  Server.MapPath( " \\upload " );
            doUpload();
        }
    }

     protected   void  doUpload()
    {
         try
        {
            HttpPostedFile file  =  file1.PostedFile;
             string  strNewPath  =  GetSaveFilePath()  +  GetExtension(file.FileName);
            file.SaveAs(picPath + strNewPath);
             string  urlPath  =  picServer  +  strNewPath;
            urlPath  =  urlPath.Replace( " \\ " ,  " / " );
            WriteJs( " parent.uploadsuccess(' "   +  urlPath  +   " ',' "   +  itemID  +   " ');  " );
            
        }
         catch  (Exception ex)
        {
            WriteJs( " parent.uploaderror(); " );            
        }
    }

     private   string  GetExtension( string  fileName)
    {
         try
        {
             int  startPos  =  fileName.LastIndexOf( " . " );
             string  ext  =  fileName.Substring(startPos, fileName.Length  -  startPos);
             return  ext;
        }
         catch  (Exception ex)
        {
            WriteJs( " parent.uploaderror(' "   +  itemID  +   " '); " );
             return   string .Empty;
        }
    }

     private   string  GetSaveFilePath()
    {
         try
        {
            DateTime dateTime  =  DateTime.Now;
             string  yearStr  =  dateTime.Year.ToString(); ;
             string  monthStr  =  dateTime.Month.ToString();
             string  dayStr  =  dateTime.Day.ToString();
             string  hourStr  =  dateTime.Hour.ToString();
             string  minuteStr  =  dateTime.Minute.ToString();
             string  dir  =  dateTime.ToString( @" \\yyyyMMdd " );
             if  ( ! Directory.Exists(picPath  +  dir))
            {
                Directory.CreateDirectory(picPath  +  dir);
            }
             return  dir  +  dateTime.ToString( " \\\\yyyyMMddhhmmssffff " );
        }
         catch  (Exception ex)
        {
            WriteJs( " parent.uploaderror(); " );
             return   string .Empty;
        }
    }

     protected   void  WriteJs( string  jsContent)
    {        
         this .Page.RegisterStartupScript( " writejs " , " <script type='text/javascript'> " +  jsContent + " </script> " );
    }

}

基本上就是这些，重点请看第一部份的代码，主要是JS控件显示，还有一个重点是upload.aspx调用父级页面的方法这些实现。

Javascript无刷新上传演示地址: http://www.wathon.com/opensource/js/ajaxuploadv1/upload.html
源代码下载地址： http://www.wathon.com/opensource/js/ajaxuploadv1/ajaxupload_src.zip

转载于:https://www.cnblogs.com/yuewh491/archive/2007/07/16/819539.html