jQuery Ajax File Upload(附源码)

项目结构

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

效果图

2010-10-21 11-24-27

客户端html代码

隐藏行号 复制代码 ？ Default.aspx 
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %>

  2. 

  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.         });

  38. 

  39.     </script>

    

  40. </head>

    

  41. <body>

    

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

    

  43.     <div id="upload">

    

  44.         Upload File

    

  45.     </div>

    

  46. 

    

  47.     <!-- Upload Button-->

    

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

    

  49.     <!--List Files-->

    

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

    

  51. 

    

  52. 

    

  53.     </form>

    

  54. </body>

    

  55. </html>

    

  56. 

    

  57. 





服务端处理代码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;

    

  7. 

  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.             {

    

  22. 

  23.                 Response.Write("fail");

    

  24.             }

    

  25.         }

    

  26.     }

    

  27. }

    





下载地址：http://pjw100.download.csdn.net/
找到文件 jquery ajax file upload(刚刚上传，文件可能还没刷出来)




            
posted @ 
2010-10-21 11:29 
Sunny Peng 
阅读(4282) 
评论(0) 
 
收藏 
举报