先引入脚本  这里最好是把jquery的脚本升级到1.7

<script src="js/jquery-1.7.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>

 

$("#btnUpload").click(function () {
$("#mytype").val("updateuserinfo");
alert("开始上传喽");
$("#form1").ajaxSubmit({ dataType: 'json',
success: function (data) {
alert("上传成功");
},
error: function (xhr) {
alert("上传失败");
}
});
});

 

<form id="form1" action="handler/xxHandler.ashx" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>附件:</td>
<td>
<input type="file" name="fileName" />
<input type="hidden" name="uid" />
</td>
</tr>
<tr>
<td>:</td>
<td>
<input type="button" id="btnUpload" value="点击上传"/> <input type="text" name="type" id="mytype" /></td>
</tr> </table> </form>

后台保存图片代码

public static string DoUpFile(HttpContext context, string id, int type)
{
bool isUpload = false;
string returnFile = "";
if (context.Request.Files.Count > 0)
{
HttpPostedFile file = context.Request.Files[0];
string fileNameExt = file.FileName.Substring(file.FileName.LastIndexOf("."));
if (fileNameExt.ToLower() != ".jpg" && fileNameExt.ToLower() != ".mp3" &&
fileNameExt.ToLower() != ".png" && fileNameExt.ToLower() != ".jpeg")
{
//throw new Exception("文件格式错误,不能识别。");
throw new MessageJxtException(Message.文件格式错误上传失败);
} string yearMonthDay = DateTime.Now.ToString("yyyMMdd");
string filePath = ""; string name = DateTime.Now.ToString("yyyyMMdd_HHmmssffff");
switch (type)
{
case 1: //头像
filePath = context.Server.MapPath(string.Format("data/{0}", type));
name = id;
break;
case 3: //通知图片
case 4: //聊天图片
case 5: //通知声音
case 6: //聊天声音
filePath = context.Server.MapPath(string.Format("data/{0}/{1}", type, yearMonthDay));
break;
default:
filePath = context.Server.MapPath(string.Format("data/{0}/{1}", type, yearMonthDay));
break;
} if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string myFileName = name + fileNameExt.ToLower();
string savePath = filePath + "\\" + myFileName; file.SaveAs(savePath);
//如果是图片,生成缩略图
if (fileNameExt.ToLower() == ".jpg" || fileNameExt.ToLower() == ".png" ||
fileNameExt.ToLower() == ".jpeg")
{
//缩略图地址
string thumbnailName = filePath + "\\" + name + "_s" + fileNameExt.ToLower();
Thumbnail.CutForSquare(savePath, thumbnailName, 200, 70);
}
isUpload = true;
returnFile = myFileName; } }

保存缩略图(正方形裁剪)

/// <summary>
/// 正方型裁剪
/// 以图片中心为轴心,截取正方型,然后等比缩放
/// 用于头像处理
/// </summary>
/// <param name="postedFile">原图HttpPostedFile对象</param>
/// <param name="fileSaveUrl">缩略图存放地址</param>
/// <param name="side">指定的边长(正方型)</param>
/// <param name="quality">质量(范围0-100)</param>
public static void CutForSquare(System.IO.Stream fromFile, string fileSaveUrl, int side, int quality)
{
//创建目录
string dir = Path.GetDirectoryName(fileSaveUrl);
if (!Directory.Exists(dir))
Directory.CreateDirectory(dir); //原始图片(获取原始图片创建对象,并使用流中嵌入的颜色管理信息)
System.Drawing.Image initImage = System.Drawing.Image.FromStream(fromFile, true); //原图宽高均小于模版,不作处理,直接保存
if (initImage.Width <= side && initImage.Height <= side)
{
initImage.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg);
}
else
{
//原始图片的宽、高
int initWidth = initImage.Width;
int initHeight = initImage.Height; //非正方型先裁剪为正方型
if (initWidth != initHeight)
{
//截图对象
System.Drawing.Image pickedImage = null;
System.Drawing.Graphics pickedG = null; //宽大于高的横图
if (initWidth > initHeight)
{
//对象实例化
pickedImage = new System.Drawing.Bitmap(initHeight, initHeight);
pickedG = System.Drawing.Graphics.FromImage(pickedImage);
//设置质量
pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//定位
Rectangle fromR = new Rectangle((initWidth - initHeight) / 2, 0, initHeight, initHeight);
Rectangle toR = new Rectangle(0, 0, initHeight, initHeight);
//画图
pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
//重置宽
initWidth = initHeight;
}
//高大于宽的竖图
else
{
//对象实例化
pickedImage = new System.Drawing.Bitmap(initWidth, initWidth);
pickedG = System.Drawing.Graphics.FromImage(pickedImage);
//设置质量
pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//定位
Rectangle fromR = new Rectangle(0, (initHeight - initWidth) / 2, initWidth, initWidth);
Rectangle toR = new Rectangle(0, 0, initWidth, initWidth);
//画图
pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
//重置高
initHeight = initWidth;
} //将截图对象赋给原图
initImage = (System.Drawing.Image)pickedImage.Clone();
//释放截图资源
pickedG.Dispose();
pickedImage.Dispose();
} //缩略图对象
System.Drawing.Image resultImage = new System.Drawing.Bitmap(side, side);
System.Drawing.Graphics resultG = System.Drawing.Graphics.FromImage(resultImage);
//设置质量
resultG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
resultG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//用指定背景色清空画布
resultG.Clear(Color.White);
//绘制缩略图
resultG.DrawImage(initImage, new System.Drawing.Rectangle(0, 0, side, side), new System.Drawing.Rectangle(0, 0, initWidth, initHeight), System.Drawing.GraphicsUnit.Pixel); //关键质量控制
//获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff
ImageCodecInfo[] icis = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo ici = null;
foreach (ImageCodecInfo i in icis)
{
if (i.MimeType == "image/jpeg" || i.MimeType == "image/bmp" || i.MimeType == "image/png" || i.MimeType == "image/gif")
{
ici = i;
}
}
EncoderParameters ep = new EncoderParameters(1);
ep.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)quality); //保存缩略图
resultImage.Save(fileSaveUrl, ici, ep); //释放关键质量控制所用资源
ep.Dispose(); //释放缩略图资源
resultG.Dispose();
resultImage.Dispose(); //释放原始图片资源
initImage.Dispose();
}
}

比较完整的参考资料(上传图片,删除图片,带上传进度条显示)

http://www.cnblogs.com/cysolo/archive/2013/06/09/3129119.html

最后,我们说一下 AjaxForm与AjaxSubmit的差异

AjaxForm 是用来对表单进行验证,例如提交一个用户名过去看看是否符合规定等等

AjaxSubmit 则是将整个表单都用ajax的方式进行了提交,包括图片都可以提交过去。

ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异的更多相关文章

  1. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  2. 241个jquery插件—jquery插件大全

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  3. jQuery插件之Form

    一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.cl ...

  4. jQuery.Form.js使用方法

    一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.cl ...

  5. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  6. 自己写的select元素可编辑、可筛选JQuery插件 jquery.inputselectbox.js

    /* 功能:实现对select下拉框可输入的功能, 输入时会对下拉框的内容进行动态过滤. 参数:没有选择任何值时默认显示的文字 如何使用:$("#firstLevel").inpu ...

  7. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  8. Jquery插件jqprint-0.3.js实现打印

    1.首先引用Jquery和jqprint-0.3.js(依赖于Jquery的) <script language="javascript" src="jquery- ...

  9. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

随机推荐

  1. 在MAC上安装虚拟机搭建Ubuntu开发环境

    由于工作需要,需要在LINUX环境搭建服务器,但是工作中使用的是MAC系统,只好用虚拟机来搭建LINUX服务器环境.下面记录介绍一下搭建步骤以供需要的人参考使用. 下载准备 虚拟机使用VMWare   ...

  2. NYOJ-36 最长公共子序列 AC 分类: NYOJ 2014-01-03 20:54 155人阅读 评论(0) 收藏

    #include<stdio.h> #include<string.h> #define N 1010 #define max(x,y) x>y?x:y int dp() ...

  3. ios开发之网络数据的下载与上传

    要实现网络数据的下载与上传,主要有三种方式 > NSURLConnection  针对少量数据,使用“GET”或“POST”方法从服务器获取数据,使用“POST”方法向服务器传输数据; > ...

  4. uva 11627

    二分 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #inc ...

  5. ural 1864

    题意描述不清   而且还卡精度 ~~ #include <cstdio> #include <cstring> #include <iostream> using ...

  6. uniqueidentifier 数据类型(转)

     想要产生这种唯一标识的格式的数据: 6F9619FF-8B86-D011-B42D-00C04FC964FF 应该怎么做呢?答: uniqueidentifier 数据类型可存储 16 字节的二进制 ...

  7. Jquery+Jquery-easyui的倒计时

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. POJ 1724 ROADS(BFS+优先队列)

    题目链接 题意 : 求从1城市到n城市的最短路.但是每条路有两个属性,一个是路长,一个是花费.要求在花费为K内,找到最短路. 思路 :这个题好像有很多种做法,我用了BFS+优先队列.崔老师真是千年不变 ...

  9. 搭建hadoop环境,在win7的eclipse上远程操作(Linux上)hadoop2.6.0出错的一些总结

    问题1:在DFS Lcation 上不能对文件进行操作: 解决方法: 在hadoop上的每个节点上修改该文件 conf/mapred-site.xml,增加: <property> < ...

  10. Qt4升级Qt5注意问题

    Qt4升级Qt5注意问题 Qt4过渡到Qt5的项目一开始就受阻,记录一下遇到的下面的问题 --->编译遇到类似错误: error: QCalendarWidget: No such file o ...