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             //验证上传的权限TODO13             string _fileNamePath = "";14             try15             {16                 _fileNamePath = context.Request.Files[0].FileName;17                 //开始上传18                 string _savedFileResult = UpLoadImage(_fileNamePath, context);19                 context.Response.Write(_savedFileResult);20             }21             catch22             {23                 context.Response.Write("上传提交出错");24             }25         }

注：整个上传使用ajax 异步数据，同时jquery回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。

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