• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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无刷新上传文件示例源码


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Asp.NETCore2.0与EF的ABP框架入门视频教程发布时间:2022-07-10
下一篇:
ASP.NET 2.0 Client Callback 浅析发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap