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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

使用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无刷新上传文件示例源码