再次和大家分享我的图片上传插件，基于jquery的上传插件，ajax图片上传。

最新推荐文章于 2021-08-05 22:15:28 发布

iteye_20025

最新推荐文章于 2021-08-05 22:15:28 发布

阅读量259

点赞数

文章标签： xhtml javascript c# ViewUI

经过一段时间的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。主要改变还是做成了插件。这样使用起来简单多了。
此前的版本请看我的相关文章

喜欢的这个插件的朋友可以加入：63181865 索取demo

iteye_20025

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
再次和大家分享我的图片上传插件，基于jquery的上传插件，ajax图片上传。

经过一段时间的jquery插件学习，现在终于可以自己开发插件了。先来一张效果图吧：终于弄到了一张小于2M的图片了。HTML代码：&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="jq_test.test" %&gt;&lt;!DOCTYPE html PUBL...
复制链接

扫一扫