Jquery ajaxsubmit上传图片实现代码

154 阅读 0 评论 102 点赞

我是靠谱客的博主明理洋葱，最近开发中收集的这篇文章主要介绍Jquery ajaxsubmit上传图片实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

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

1.引用 jquery js 框架（这东西的好处无需多论）后再引用 “jquery.form.js”。
2.建立一般处理程序 ashx。
核心代码如下：
html:

复制代码代码如下:

 
<asp:Content ID="Content3" ContentPlaceHolderID="Head" runat="server"> 
<script src="<%=Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script> 
<script src="<%=Url.Content("~/Scripts/jquery.form.js") %>" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//上传图片 
$("#btnUpload").click(function () { 
if ($("#flUpload").val() == "") { 
alert("请选择一个图片文件，再点击上传。"); 
return; 
} 
$('#UpLoadForm').ajaxSubmit({ 
success: function (html, status) { 
var result = html.replace("<pre>", ""); 
result = result.replace("</pre>", ""); 
$("#image").attr('src', result); 
alert(result); 
} 
}); 
}); 
}); 

ashx 如下：

复制代码代码如下:

 
namespace TestMvc.Utility 
{ 
/// <summary> 
/// Summary description for PicUploadHander 
/// </summary> 
public class PicUploadHander : IHttpHandler 
{ 

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
//验证上传的权限TODO 
string _fileNamePath = ""; 
try 
{ 
_fileNamePath = context.Request.Files[0].FileName; 
//开始上传 
string _savedFileResult = UpLoadImage(_fileNamePath, context); 
context.Response.Write(_savedFileResult); 
} 
catch 
{ 
context.Response.Write("上传提交出错"); 
} 
} 

注：整个上传使用ajax 异步数据，同时jquery回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。
本例代码在此下载，FireFox 下测试通过。http://xiazai.uoften.com/201011/yuanma/AjaxUploadPic.rar