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