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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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之数据库操作详解及乱码解决!
2007/01/02 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python元组操作实例解析
2014/09/23 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
事业单位个人应聘自荐信
2013/09/21 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
保险公司晨会主持词
2014/03/22 职场文书
单位工作证明书格式
2014/10/04 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
瘦西湖导游词
2015/02/03 职场文书
骨干教师个人总结
2015/02/11 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Linux中如何安装并部署Redis
2022/04/18 Servers