经过一段时间的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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.net的服务器端控件,如:
<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