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:

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 如下：

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 下测试通过。

posted on 2010-10-31 17:06 ryanding 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/ryanding/archive/2010/10/31/1865630.html