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

最新推荐文章于 2012-09-25 19:59:00 发布

zzcbyl

最新推荐文章于 2012-09-25 19:59:00 发布

阅读量677

点赞数

分类专栏： C# Asp.net 文章标签： asp.net ajax function server upload textbox

Asp.net 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

使用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     }