jQuery Ajax File Upload(附源碼)

項目結構

Default.aspx
Upload.aspx
Scripts/…
style.css

用戶端html代碼

隱藏行號 複製代碼 ？ Default.aspx

1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %>

3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4. <html xmlns="http://www.w3.org/1999/xhtml">

5. <head runat="server">

6.     <title></title>

7.     <link rel="Stylesheet" type="text/css" href="style.css" media="all" />

8.     <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>

9.     <script type="text/javascript" src="../Scripts/ajaxupload.3.5.js"></script>

10.     <script type="text/javascript">

11.         $(function () {

12.             var btnUpload = $('#upload');

13.             var status = $('#status');

14.             new AjaxUpload(btnUpload, {

15.                 action: 'Upload.aspx',

16.                 //Name of the file input box

17.                 name: 'uploadfile',

18.                 onSubmit: function (file, ext) {

19.                     if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {

20.                         // check for valid file extension

21.                         status.text('Only JPG, PNG or GIF files are allowed');

22.                         return false;

23.                     }

24.                     status.text('Uploading...');

25.                 },

26.                 onComplete: function (file, response) {

27.                     //On completion clear the status

28.                     status.text('');

29.                     //Add uploaded file to list

30.                     if (response === "success") {

31.                         $('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" alt="" /><br />' + file).addClass('success');

32.                     } else {

33.                         $('<li></li>').appendTo('#files').text(file).addClass('error');

34.                     }

35.                 }

36.             });

37.         });

39.     </script>

40. </head>

41. <body>

42.     <form id="form1" runat="server">

43.     <div id="upload">

44.         Upload File

45.     </div>

47.     <!-- Upload Button-->

48.     <div id="Div1" >Upload File</div><span id="status" ></span>

49.     <!--List Files-->

50.     <ul id="files" ></ul>

53.     </form>

54. </body>

55. </html>

服務端處理代碼Upload.aspx

隱藏行號 複製代碼 ？ Default.aspx

1. using System;

2. using System.Collections.Generic;

3. using System.Linq;

4. using System.Web;

5. using System.Web.UI;

6. using System.Web.UI.WebControls;

8. namespace JqueryAjaxUploadTest

9. {

10.     public partial class Upload : System.Web.UI.Page

11.     {

12.         protected void Page_Load(object sender, EventArgs e)

13.         {

14.             try

15.             {

16.                 HttpPostedFile hpfFile = Request.Files["uploadfile"];

17.                 hpfFile.SaveAs(Server.MapPath("~/uploads/") + hpfFile.FileName);

18.                 Response.Write("success");

19.             }

20.             catch (Exception)

21.             {

23.                 Response.Write("fail");

24.             }

25.         }

26.     }

27. }

：http://pjw100.download.csdn.net/
找到檔案 jquery ajax file upload(剛剛上傳，檔案可能還沒刷出來)