最新资讯当前位置:万彩娱乐平台 > 最新资讯 > >

Jquery ajaxsubmit上传图片实现代码

  

[ajaxsubmit]Jquery ajaxsubmit上传图片实现代码

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

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

  
  
异步上传图片的步骤如下:  
  
1.引用 jquery js 框架(这东西的好处无需多论)后再引用 “jquery.form.js”。

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

  
核心代码如下:  
html:  
代码如下:

  
  
" type="text/javascript">  
" type="text/javascript">  
  
$(function () {  
//上传图片  
$("#btnUpload").click(function () {  
if ($("#flUpload").val() == "") {  
alert("请选择一个图片文件,再点击上传。");  
return;  
}  
$('#UpLoadForm').ajaxSubmit({  
success: function (html, status) {  
var result = html.replace("万彩娱乐
", "");  
result = result.replace("
", "");  
$("#image").attr('src', result);  
alert(result);  
}  
});  
});  
});  
  
ashx 如下:  
代码如下:
  
namespace TestMvc.Utility  
{  
///   
/// Summary description for PicUploadHander  
///
  
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 下测试通过。

(责任编辑:admin)

上一篇:JS获取url参数、主域名的方法实例分析

下一篇:万彩娱乐谷歌移动搜索可直接展示APP中的内容

推荐内容

客户服务热线

010-400-12345

在线客服