经过一段时间的jquery插件学习，现在终于可以自己开发插件了。
先来一张效果图吧：
终于弄到了一张小于2M的图片了。
HTML代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="jq_test.test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>jquery上传插件</title><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script src="Scripts/jquery.upload.min.js" type="text/javascript"></script></head><body><form runat="server"><div style="width: 100%; float: left;"><input type="hidden" id="Hidden1" runat="server" value="" /><p class="img_p"></p><span class="img_span"><input type="file" name="file" /></span><input type="button" value="上传" class="upload" /><br /><span>图片最适合宽度 390px × 228px。</span></div><div style="width: 100%; float: left;"><input type="hidden" id="Hidden2" runat="server" value="" /><p class="img_p"></p><span class="img_span"><input type="file" name="file" /></span><input type="button" value="上传" class="upload" /><br /><span>图片最适合宽度 390px × 228px。</span></div><asp:Literal ID="Literal1" runat="server"></asp:Literal><asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" /></form><script type="text/javascript">$(document).ready(function () {//使用方法：$("input.upload").upload();});</script></body></html>
服务器端处理页面upload.aspx.cs方法文件代码：
protected void Page_Load(object sender, EventArgs e){//System.Threading.Thread.Sleep(1000);string data = "";if (!Request.QueryString.HasKeys() && Request.Files.Keys.Count == 0){data = string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "no data", "没有数据可处理!", "");}if (Request.QueryString["action"] == "upload"){data = Upload();}if (Request.QueryString["action"] == "delete"){data = Delete();}Response.Write(data);Response.End();}public string Upload(){if (Request.Files["file"] == null){return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "no file", "没有数据可处理!", "");}HttpPostedFile file = Request.Files["file"];//验证文件格式if (!IsAllowedExtension(file)){return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "fail", "文件格式不正确!", "");}string strDay = System.DateTime.Now.ToString("yyyyMM");string fix = System.IO.Path.GetExtension(file.FileName);String filePath = "~/upfiles/" + strDay + "/" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + fix;string DirUrl = HttpContext.Current.Server.MapPath("~/upfiles/" + strDay + "/");if (!System.IO.Directory.Exists(DirUrl))//检测文件夹是否存在，不存在则创建{System.IO.Directory.CreateDirectory(DirUrl);}try{file.SaveAs(Server.MapPath(filePath));return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "ok", "上传成功!", ResolveUrl(filePath));}catch (Exception){return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "erro", "文件上传发生错误!", "");}}public string Delete(){if (Request["imgurl"] != null){string url = Request["imgurl"];try{System.IO.File.Delete(HttpContext.Current.Server.MapPath(url));return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "ok", "文件删除成功!", "");}catch (Exception){System.IO.File.Delete(HttpContext.Current.Server.MapPath(url));return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "erro", "文件删除发生错误!", "");}}return string.Format("{{\"result\":\"{0}\",\"msg\":\"{1}\",\"imgurl\":\"{2}\"}}", "no file", "没有可删除的文件!", "");}
功能说明：
1.此为，覆盖上传(即，上传时先判断是有已经有图片，有则先删除原图再上传，减少图片垃圾)
2.页面加载时，若有图片则显示图片(修改时特别简单，无需复杂的给img绑定url，只需该hidden赋值即可)
如：
protected void Page_Load(object sender, EventArgs e)
{
Hidden1.Value = "images/1.jpg";
}
则在页面加载时会在hidden1控件所在的上传体中显示1.jpg的图片。(所图片显示非常简单)
3.上图片后，双击图片可删除图片(服务器上同时删除)
4.图片格式限制，目前只能上传格式为gif|jpeg|jpg|png|bmp，双重验证(js+服务器端)如果把.rar改成.jpg也是不能上传的。
5.此为ajax异步上传，上传体验更好，上传完后即可预览。
6.适合于上传单张图片。
使用说明：
<div>
<input type="hidden" id="Hidden2" runat="server" value="" />
<p class="img_p">
</p>
<span class="img_span">
<input type="file" name="file" />
</span>
<input type="button" value="上传" class="upload" /><br />
<span>图片最适合宽度 390px × 228px。</span>
</div>
此为一个上传体：
页面中需引入
jquery.1.4.X.js，
jquery.upload.min.js//此插件合并了jquery.form.js插件所以无需在引入jquery.form.js插件。
上传体说明：
1.
<input type="hidden" id="Hidden2" runat="server" value="" />
这个是隐藏域，用于存储上传后返回的图片路径。
注：如果需要后台.cs文件获取图片地址的话，请加上ruant="server".
同样你也可以使用的服务器端控件，如：
<asp:HiddenField ID="HiddenField1" runat="server" />
2.
<p class="img_p">
</p>
此为上传图片成功后，图片将显示在这里。
3.
<span class="img_span">
<input type="file" name="file" />
</span>
此为图片浏览控件，当点击上传时将在这里显示"正在上传..."并和loading图片一起显示。
上传成功后将重新填回<input type="file" name="file" />控件
4.
<input type="button" value="上传" class="upload" />
此为上传按钮。
上传体中的这些控件必须有。class不能变
$(o).parent().find("input:hidden")
$(o).parent().find("input:file")
$(o).parent().find("span.img_span")
$(o).parent().find("p.img_p")
o为上传按钮
插件中是以以上的的方式获取这些对象的，所以class不能改变，元素不能变。
使用方法：
1.$("input.upload").upload();
2.$("input.upload").upload({imgWidth:"300",imgHeight:"200",postUrl:"upload.aspx"});
参数说明：
{imgWidth:"300",imgHeight:"200",postUrl:"upload.aspx"}
imgWidth：图片显示的宽，默认为："",可为数字或"100"。
imgHeight：图片显示的高，默认为100,可为数字或"100"。
postUrl：提交上传请求的url地址，默认为"upload.aspx"。
imgWidth,imgHeight当两者都为""(空字符串)时怎按原图显示。
当imgWidth为"",imgHeight给值时，图片的宽将根据高按比率缩小。
同理 若给imgWidth值,而imgHeight为""时，则高将根据宽按比率缩小。
注意:此上传插件保存的是图片的原图，不会对图片进行大小的改变。只对图片显示的大小进行改变(根据给的参数进行限制)。
说明，此版本为jquey插件，在此以前的版本不是jquery插件。
此次修改了一些bug。主要改变还是做成了插件。这样使用起来简单多了。
此前的版本请看我的相关文章
喜欢的这个插件的朋友可以加入qq群：63181865 索取demo
