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

wangxiaohigh

浏览: 1459290 次

最近访客更多访客>>

u012363178

innwin

chenglibang

nat2010

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1691)

社区版块

存档分类

2012-04 ( 2)
2011-12 ( 74)
2011-11 ( 268)
更多存档...

经过一段时间的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

分享到：