Jquery ajaxsubmit上传图片实现代码
来源:互联网 发布:淘宝网的优势与劣势 编辑:程序博客网 时间:2024/06/05 10:07
这是数月前的事情了,场景是这样的: 在进行图片上传的时,我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。
而且未建立统一上传函数。于是将代码改造了。心想来个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.jb51.net/201011/yuanma/AjaxUploadPic.rar
转:http://www.jb51.net/article/25213.htm
0 0
- Jquery ajaxsubmit上传图片实现代码
- Jquery ajaxsubmit 上传图片
- Jquery ajaxsubmit 上传图片
- jquery ajaxsubmit上传图片IE问题
- Jquery ajaxsubmit 异步上传图片 无刷新
- ajaxSubmit 提交表单实现图片上传
- jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
- php+jquery Ajax异步上传图片(ajaxSubmit)实例
- ajaxSubmit实现头像上传
- jquery ajaxsubmit上传文件初探
- 异步上传图片-ajaxSubmit提交
- jquery的ajaxSubmit()和多文件上传
- JQuery+ajax实现批量上传图片的代码
- ajaxsubmit表单提交以及图片上传
- AjaxSubmit图片上传success返回问题
- 异步提交上传图片(ajaxSubmit)
- 使用ajaxSubmit异步上传图片并展示
- ajaxSubmit上传图片不回调success函数
- Servlet学习小结(上)
- java
- Codeforces_282A
- Android设置Settings实现:PreferenceActivity【1】
- Quartz Scheduler Product 定时器API
- Jquery ajaxsubmit上传图片实现代码
- gcc解析
- XMPP客户端库Smack 4.0.6版开发之一
- toggle 和 onfi区别
- Fragment生命周期应用交互详解
- yum 使用的注意事项
- C++ 网络连通性检测
- linux ubuntu 下c++ 开发环境
- 黑马程序员--java基础流程控制与方法(上)