Asp.net使用ajax无刷新上传文件（附源码）

使用Ajax无刷新上传文件是当前比较流行的功能。借助JQuery强大的插件，现在已经可以很容易了。

首先导入js文件jquery.ajaxfileupload.js。此插件的原理是在文档中创建iframe和form然后在将文件上传到服务器。

 

代码

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  id ="Head1"  runat ="server" >
 3       < title > ajax上传文件 </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery.js" ></ script >
 5       < script  type ="text/javascript"  src ="/js/jquery.ajaxfileupload.js" ></ script >
 6       < script  type ="text/javascript" >
 7      $( function (){
 8          $( ' #fup ' ).change( function (){
 9              upload();
10          });
11      });
12      
13       function  upload(){
14          $.ajaxFileUpload(
15              {
16                  url :  ' /ajaxUpload.aspx?random= '   +  Math.random(),
17                  secureuri :  false ,
18                  fileElementId :  ' fup ' ,
19                  dataType :  ' json ' ,
20                  success:  function  (data, status)
21                  {
22                       if (data.status  ==   ' success ' )
23                      {
24                          $( ' #tmp ' ).attr( ' src ' , data.msg.Origin);
25                          $( ' #tb, #hf ' ).val(data.msg.Origin);
26                      }
27                       else
28                      {
29                          alert(data.msg);
30                      }
31                  },
32                  error:  function  (data, status, e)
33                  {
34                      alert(data.msg);
35                      alert(status);
36                      alert(e);
37                  }
38              });
39          
40          $( ' #fup ' ).change( function (){
41              upload();
42              
43          });
44      }
45       </ script >
46  </ head >
47  < body >
48       < form  id ="form1"  runat ="server" >
49       < div >
50           < asp:FileUpload  ID ="fup"  runat ="server"   />
51           < img  id ="tmp"   />
52           < asp:TextBox  ID ="tb"  runat ="server" ></ asp:TextBox >
53           < asp:HiddenField  ID ="hf"  runat ="server"   />
54       </ div >
55       </ form >
56  </ body >
57  </ html >

 

上传文件代码：

 

代码

 1  protected   void  Page_Load( object  sender, EventArgs e)
 2      {
 3          HttpFileCollection files  =  Request.Files;
 4           if  (files  !=   null   &&  files.Count  >   0 )
 5          {
 6              HttpPostedFile file  =  files[ 0 ];
 7 
 8               string  tmpPath  =  Server.MapPath( " /Upload/ " );
 9               string  fileName  =  Path.GetFileName(file.FileName);
10               try
11              {
12                  file.SaveAs(tmpPath  +  fileName);
13                  Response.Write( @" {
14                      status : 'success', 
15                      msg: { 
16                          Origin : ' "   +   " /upload/ "   +  fileName  +   @" '
17                      }
18                  } " );
19              }
20               catch  (Exception ex)
21              {
22                  Response.Write( @" {
23                  status : 'error',
24                  msg : ' "   +  ex.Message  +   @" '
25                  } " );
26                  Response.End();
27              }
28          }
29      }

 

 

Ajax无刷新上传文件示例源码