Jquery ajaxsubmit 上传图片

Jquery ajaxsubmit 上传图片

     这是数月前的事情了，场景是这样的： 在进行图片上传的时，我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。而且未建立统一上传函数。于是将代码改造了。心想来个ajax异步上传图片吧，这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了 这篇文章   直接依葫芦画瓢，将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上的时问题来了。上传文件失效了！汗～ 都是偷懒造成的恶果。继续打开先前参考的那篇文章。原来作者解释了只能在本地使用而不能发布到服务器上。心想我难道还得用 iframe + http post 这个 郁闷的方式么？？

    于是不甘心的我打开了更加强大的google，开始全球搜索寻求解决方案，终于功夫不负有心人。找到了 "jquery.form.js" （其实内部还是iframe）。

    异步上传图片的步骤如下：

      1.引用 jquery js 框架（这东西的好处无需多论）后再引用 “jquery.form.js”。

      2.建立一般处理程序 ashx。

 

    核心代码如下：

     html:

    
    

     
     <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
     
      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 
     
                             $(
     
     "
     
     #image
     
     "
     
     ).attr(
     
     '
     
     src
     
     '
     
     , result);

     
     17 
     
                             alert(result);

     
     18 
     
                         }

     
     19 
     
                     });

     
     20 
     
                 });

     
     21 
     
             });
    
    

复制代码

 

ashx 如下：

    
    

     
     <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
     
      1 
     
     namespace
     
      TestMvc.Utility

     
      2 
     
     {

     
      3 
     
         
     
     ///
     
      
     
     <summary>
     
     

     
      4 
     
         
     
     ///
     
      Summary description for PicUploadHander

     
      5 
     
         
     
     ///
     
      
     
     </summary>
     
     

     
      6 
     
      
     
         
     
     public
     
      
     
     class
     
      PicUploadHander : IHttpHandler

     
      7 
     
         {

     
      8 
     
           

     
      9 
     
             
     
     public
     
      
     
     void
     
      ProcessRequest(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回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。

本例代码在此下载，FireFox 下测试通过。

作者：RyanDing
出处：http://www.cnblogs.com/ryanding/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ryan.d@qq.com 联系作者本人。