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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
小程序实现授权登陆的解决方案
Dec 02 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
webpack的pitching loader详解
Sep 23 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
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python输出9*9乘法表的方法
2015/05/25 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
微信跳一跳python代码实现
2018/01/05 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python实现飞机大战项目
2020/03/11 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Django ORM filter() 的运用详解
2020/05/14 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
python从PDF中提取数据的示例
2020/10/30 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
档案接收函
2014/01/13 职场文书
防火标语大全
2014/10/06 职场文书
实习单位证明范例
2014/11/17 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS