再次和大家分享我的图片上传插件，基于jquery的上传插件，ajax图片上传。
2011-12-05 02:36
956 查看
经过一段时间的jquery插件学习，现在终于可以自己开发插件了。
先来一张效果图吧：
终于弄到了一张小于2M的图片了。
HTML代码：
服务器端处理页面upload.aspx.cs方法文件代码：
功能说明：
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
先来一张效果图吧：
终于弄到了一张小于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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 图片上传插件，基于jquery的上传插件，ajax图片上传，再更新
- 图片上传插件，基于jquery的上传插件，ajax图片上传， 更新更新啦
- 基于jquery 插件 ajax 上传图片
- jQuery插件uploadify实现ajax效果的图片上传
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change
- 基于SSH2框架下jquery插件ajaxfileupload文件上传,下载,预览(.doc)实例
- jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)
- 基于ajax的Html5文件上传插件，带进度并支持图片预览
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- 基于 jQuery 的图片自动上传插件
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- 基于JQuery的图片上传预览插件（图片预览、过滤文件类型、限制图片大小、图片显示后回调）
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)