ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异

先引入脚本  这里最好是把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();
}
}

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

/article/6442835.html

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

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

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