Jquery ajaxsubmit上传图片实现代码


Posted in Javascript onNovember 04, 2010

而且未建立统一上传函数。于是将代码改造了。心想来个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.3water.com/201011/yuanma/AjaxUploadPic.rar
Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jquery等待效果示例
May 01 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
QUnit jQuery的TDD框架
Nov 04 #Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
You might like
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python字典操作简明总结
2015/04/13 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python爬取微信公众号文章的方法
2019/02/26 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python实现最大优先队列
2019/08/29 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python 画函数曲线示例
2019/12/04 Python
python入门之井字棋小游戏
2020/03/05 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
影视制作岗位职责
2013/12/04 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
高三自我评价
2014/02/01 职场文书
保安队长职务说明书
2014/02/23 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
护士自我推荐信范文
2015/03/24 职场文书
警示教育片观后感
2015/06/17 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang