Jquery ajaxsubmit 異步上傳圖片 無刷新

先前有作異步上傳，可是好像都沒成功，看到網友的一篇博客，先記錄下來，之後看能不能用到

異步上傳圖片的步驟以下：

      1.引用 jquery js 框架（這東西的好處無需多論）後再引用 「jquery.form.js」。

      2.創建通常處理程序 ashx。

    核心代碼以下：

     html:

   
   
   
   

    
    
    
    
    
    
    
     1 
    
    
    
    <
    
    
    
    asp:Content ID
    
    
    
    =
    
    
    
    "
    
    
    
    Content3
    
    
    
    "
    
    
    
     ContentPlaceHolderID
    
    
    
    =
    
    
    
    "
    
    
    
    Head
    
    
    
    "
    
    
    
     runat
    
    
    
    =
    
    
    
    "
    
    
    
    server
    
    
    
    "
    
    
    
    >
    
    
    
    

    
    
    
     2 
    
    
    
     
    
    
    
    <
    
    
    
    script src
    
    
    
    =
    
    
    
    "
    
    
    
    <%=Url.Content(
    
    
    
    "
    
    
    
    ~/
    
    
    
    Scripts
    
    
    
    /
    
    
    
    jquery
    
    
    
    -
    
    
    
    1.4
    
    
    
    .
    
    
    
    1
    
    
    
    .js
    
    
    
    "
    
    
    
    ) %>
    
    
    
    "
    
    
    
     type
    
    
    
    =
    
    
    
    "
    
    
    
    text/javascript
    
    
    
    "
    
    
    
    ></
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
     3 
    
    
    
     
    
    
    
    <
    
    
    
    script src
    
    
    
    =
    
    
    
    "
    
    
    
    <%=Url.Content(
    
    
    
    "
    
    
    
    ~/
    
    
    
    Scripts
    
    
    
    /
    
    
    
    jquery.form.js
    
    
    
    "
    
    
    
    ) %>
    
    
    
    "
    
    
    
     type
    
    
    
    =
    
    
    
    "
    
    
    
    text/javascript
    
    
    
    "
    
    
    
    ></
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
     4 
    
    
    
     
    
    
    
    <
    
    
    
    script type
    
    
    
    =
    
    
    
    "
    
    
    
    text/javascript
    
    
    
    "
    
    
    
    >
    
    
    
    

    
    
    
     5 
    
    
    
     $(function () {

    
    
    
     6 
    
    
    
     
    
    
    
    //
    
    
    
    上傳圖片
    
    
    
    

    
    
    
     7 
    
    
    
     
    
    
    
     $(
    
    
    
    "
    
    
    
    #btnUpload
    
    
    
    "
    
    
    
    ).click(function () {

    
    
    
     8 
    
    
    
     
    
    
    
    if
    
    
    
     ($(
    
    
    
    "
    
    
    
    #flUpload
    
    
    
    "
    
    
    
    ).val() 
    
    
    
    ==
    
    
    
     
    
    
    
    ""
    
    
    
    ) {

    
    
    
     9 
    
    
    
     alert(
    
    
    
    "
    
    
    
    請選擇一個圖片文件，再點擊上傳。
    
    
    
    "
    
    
    
    );

    
    
    
    10 
    
    
    
     
    
    
    
    return
    
    
    
    ;

    
    
    
    11 
    
    
    
     }

    
    
    
    12 
    
    
    
     $(
    
    
    
    '
    
    
    
    #UpLoadForm
    
    
    
    '
    
    
    
    ).ajaxSubmit({

    
    
    
    13 
    
    
    
     success: function (html, status) {

    
    
    
    14 
    
    
    
     var result 
    
    
    
    =
    
    
    
     html.replace(
    
    
    
    "
    
    
    
    <pre>
    
    
    
    "
    
    
    
    , 
    
    
    
    ""
    
    
    
    );

    
    
    
    15 
    
    
    
     result 
    
    
    
    =
    
    
    
     result.replace(
    
    
    
    "
    
    
    
    </pre>
    
    
    
    "
    
    
    
    , 
    
    
    
    ""
    
    
    
    );

    
    
    
    16 
    
    
    
     $(
    
    
    
    "
    
    
    
    #p_w_picpath
    
    
    
    "
    
    
    
    ).attr(
    
    
    
    '
    
    
    
    src
    
    
    
    '
    
    
    
    , result);

    
    
    
    17 
    
    
    
     alert(result);

    
    
    
    18 
    
    
    
     }

    
    
    
    19 
    
    
    
     });

    
    
    
    20 
    
    
    
     });

    
    
    
    21 
    
    
    
     });
   
   
   
   

ashx 以下：

   
   
   
   

    
    
    
    
    
    
    
     1 
    
    
    
    namespace
    
    
    
     TestMvc.Utility

    
    
    
     2 
    
    
    
    {

    
    
    
     3 
    
    
    
     
    
    
    
    ///
    
    
    
     
    
    
    
    <summary>
    
    
    
    

    
    
    
     4 
    
    
    
     
    
    
    
    ///
    
    
    
     Summary description for PicUploadHander

    
    
    
     5 
    
    
    
     
    
    
    
    ///
    
    
    
     
    
    
    
    </summary>
    
    
    
    

    
    
    
     6 
    
    
    
     
    
    
    
     
    
    
    
    public
    
    
    
     
    
    
    
    class
    
    
    
     PicUploadHander : IHttpHandler

    
    
    
     7 
    
    
    
     {

    
    
    
     8 
    
    
    
     

    
    
    
     9 
    
    
    
     
    
    
    
    public
    
    
    
     
    
    
    
    void
    
    
    
     Proce***equest(HttpContext context)

    
    
    
    10 
    
    
    
     {

    
    
    
    11 
    
    
    
     context.Response.ContentType 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    text/plain
    
    
    
    "
    
    
    
    ;

    
    
    
    12 
    
    
    
     
    
    
    
    //
    
    
    
    驗證上傳的權限TODO
    
    
    
    

    
    
    
    13 
    
    
    
     
    
    
    
    string
    
    
    
     _fileNamePath 
    
    
    
    =
    
    
    
     
    
    
    
    ""
    
    
    
    ;

    
    
    
    14 
    
    
    
     
    
    
    
    try
    
    
    
    

    
    
    
    15 
    
    
    
     {

    
    
    
    16 
    
    
    
     _fileNamePath 
    
    
    
    =
    
    
    
     context.Request.Files[
    
    
    
    0
    
    
    
    ].FileName;

    
    
    
    17 
    
    
    
     
    
    
    
    //
    
    
    
    開始上傳
    
    
    
    

    
    
    
    18 
    
    
    
     
    
    
    
    string
    
    
    
     _savedFileResult 
    
    
    
    =
    
    
    
     UpLoadImage(_fileNamePath, context);

    
    
    
    19 
    
    
    
     context.Response.Write(_savedFileResult);

    
    
    
    20 
    
    
    
     }

    
    
    
    21 
    
    
    
     
    
    
    
    catch
    
    
    
    

    
    
    
    22 
    
    
    
     {

    
    
    
    23 
    
    
    
     context.Response.Write(
    
    
    
    "
    
    
    
    上傳提交出錯
    
    
    
    "
    
    
    
    );

    
    
    
    24 
    
    
    
     }

    
    
    
    25 
    
    
    
     }
   
   
   
   

注：整個上傳使用ajax 異步數據，同時jquery回調出上傳成功後圖片在服務器上的相對路徑。總的來講此方式相對傳統的上傳圖片方式要強一些。