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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
jquery 图片轮换效果
Jul 29 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 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语句
2009/06/05 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
基于PHP制作验证码
2016/10/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
Javascript实现字数统计
2015/07/03 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python django model联合主键的例子
2019/08/06 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
pycharm永久激活超详细教程
2020/10/29 Python
客服专员岗位职责
2014/02/28 职场文书
优秀党支部申报材料
2014/12/24 职场文书
公司新员工欢迎词
2015/09/30 职场文书
python办公自动化之excel的操作
2021/05/23 Python