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

来源：互联网发布：淘宝小号怎么养2017 编辑：程序博客网时间：2024/06/14 21:58

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

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

<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server">     <title>ajax上传文件</title>     <script type="text/javascript" src="/js/jquery.js"></script>     <script type="text/javascript" src="/js/jquery.ajaxfileupload.js"></script>     <script type="text/javascript">     $(function(){         $('#fup').change(function(){             upload();         });     });          function upload(){         $.ajaxFileUpload(             {                 url : '/ajaxUpload.aspx?random=' + Math.random(),                 secureuri : false,                 fileElementId : 'fup',                 dataType : 'json',                 success: function (data, status)                 {                     if(data.status == 'success')                     {                         $('#tmp').attr('src', data.msg.Origin);                         $('#tb, #hf').val(data.msg.Origin);                     }                     else                     {                         alert(data.msg);                     }                 },                 error: function (data, status, e)                 {                     alert(data.msg);                     alert(status);                     alert(e);                 }             });                  $('#fup').change(function(){             upload();                      });     }     </script> </head> <body>     <form id="form1" runat="server">     <div>         <asp:FileUpload ID="fup" runat="server" />         <img id="tmp" />         <asp:TextBox ID="tb" runat="server"></asp:TextBox>         <asp:HiddenField ID="hf" runat="server" />     </div>     </form> </body> </html>

代码protected void Page_Load(object sender, EventArgs e)     {         HttpFileCollection files = Request.Files;         if (files != null && files.Count > 0)         {             HttpPostedFile file = files[0];              string tmpPath = Server.MapPath("/Upload/");             string fileName = Path.GetFileName(file.FileName);             try             {                 file.SaveAs(tmpPath + fileName);                 Response.Write(@"{                     status : 'success',                      msg: {                          Origin : '" + "/upload/" + fileName + @"'                     }                 }");             }             catch (Exception ex)             {                 Response.Write(@"{                 status : 'error',                 msg : '" + ex.Message + @"'                 }");                 Response.End();             }         }     }