验证码和图片上传和多张图片无刷新上传

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace Blog.UI
 7 {
 8     using System.Drawing;
 9     using Blog.Common;
10     /// <summary>
11     /// Vcode 的摘要说明
12     /// </summary>
13     public class Vcode : IHttpHandler,System.Web.SessionState.IRequiresSessionState
14     {
15         Random r = new Random();
16         public void ProcessRequest(HttpContext context)
17         {
18             //准备一张画布
19             using (Image img = new Bitmap(60, 25))
20             {
21                 
22                 //准备一个画家
23                 Graphics g = Graphics.FromImage(img);
24                 //背景画白
25                 g.Clear(Color.White);
26                 //画边框
27                 g.DrawRectangle(Pens.Red, 0, 0, img.Width - 1, img.Height - 1);
28                 //画噪点线
29                 DrawPoints(g, img, 10);
30                 //得到验证码字符串
31                 string vcodestr = Getstring(1);
32                 //画字符串
33                 g.DrawString(vcodestr, new Font("微软雅黑", 16, FontStyle.Italic | FontStyle.Strikeout), Brushes.Blue, 0, 0);
34                 DrawPoints(g, img, 10);
35                 //将图片以jpg格式显示在outputstream流
36                 img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
37                 //存进session
38                 context.Session[CommonHelper.Vcode] = vcodestr;
39             }
40         }
41         void DrawPoints(Graphics g,Image img,int n)
42         {
43             for (int i = 0; i < n; i++)
44             {
45                 int x = r.Next(0, img.Width);
46                 int y = r.Next(0, img.Height);
47                 g.DrawLine(Pens.Blue, x, y, x + r.Next(2, img.Width), y + r.Next(2, img.Width));
48             }
49             
50         }
51         string Getstring(int n)
52         {
53             string s = string.Empty;
54             
55             char[] c = new char[] { ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘a‘, ‘b‘, ‘c‘,‘d‘ };
56             for (int i = 0; i < n; i++)
57             {
58                s+=c[ r.Next(c.Length)];
59             }
60             return s;
61         }
62         public bool IsReusable
63         {
64             get
65             {
66                 return false;
67             }
68         }
69     }
70 }

<%@ Page Language="C#" MasterPageFile="~/Master/Site1.Master" AutoEventWireup="true" CodeBehind="PhotoList.aspx.cs" Inherits="Blog.UI.Photo.PhotoList" %>

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="bigying" %>
<asp:Content ID="heard" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .contentdiv
        {
            height: 200px;
            width: 130px;
            border: 1px solid blue;
            margin: 4px 2px;
            display: inline-block;
        }

            .contentdiv ul
            {
                text-align: center;
            }

        .pictureimg
        {
            width: 130px;
            height: 150px;
        }

        #pagingdiv
        {
            width: 400px;
            border: 1px solid red;
            position: relative;
            left: 320px;
            top: 250px;
        }
        #uploaddiv
        {
            width:200px;
            height:100px;
            border:1px solid red;
            margin:50px auto;
            display:none;
        }
    </style>
    <script src="/JS/jquery-1.9.1.min.js"></script>
    <script src="/JS/AjaxHelper.js"></script>
   <script type="text/javascript">

       //var pid;
       //var paid;
       function Delete(id)
       {
           alert(id);
       }
       function Showupload(pid,paid)
       {
           $("#uploaddiv").show();
           $("#pid").val(pid);
           $("#paid").val(paid);
       }
       function Cancleupload() {
           $("#uploaddiv").hide();
           
       }
       function Uploadphotoajax()
       {
           //手写ajax复习
           //var xhr = new XMLHttpRequest();
           //xhr.open("post", "/Photo/upload.ashx", true);
           //xhr.setRequestHeader("content-type","multipart/form-data");
           //xhr.onreadystatechange = function () {
           //    if (xhr.status == 200 && xhr.readyState == 4)
           //    {
           //        alert(xhr.responseText);
           //    }
           //}
           //xhr.send($("#f1").serialize());
           //AjaxHelper.prcessPost("/Photo/upload.ashx", $("#f1").serialize(), function (ajaxobj) {
           //    alert(ajaxobj);
           //});
           $("#uploadLog").html("上传中...");
           $("#f1").submit();
       }
       function uploadSuccess(msg)
       {
           if (msg.split(‘|‘).length > 1) {
               $("#imgShow").attr("src", msg.split(‘|‘)[1]);
               $("#uploadLog").html($("#uploadLog").html()+"<br/>"+msg.split(‘|‘)[0]);
           }
           else {
               alert(msg);
           }
       }
   </script>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="ContentPlaceHolder01" runat="server">
    <form runat="server">
    <asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
        <ItemTemplate>
            <div class="contentdiv">
            <ul>
                <li class="pictureli">
                    <img class="pictureimg" src="/Upload/Images/<%#Eval("Psrc")%>" /></li>
                <li><%#Eval("Ptitle") %></li>
                <li><asp:LinkButton ID="LinkButton1" runat="server" CommandArgument=‘<%#Eval("Pid") %>‘ CommandName="btnDel">删除</asp:LinkButton>

                    <a href="javascript:void(0)" onclick="Edit(<%#Eval("Pid")%>)">修改</a>

                    <a href="javascript:void(0)" onclick=‘Showupload(<%#Eval("PId")%>,<%#Eval("PAlbum") %>)‘>上传</a>
                </li>
            </ul>
        </div>
           
        </ItemTemplate>
    </asp:Repeater>
   
    <div id="pagingdiv"> <bigying:AspNetPager ID="pager"  runat="server" AlwaysShow="true" FirstPageText="首页" LastPageText="尾页" NextPageText="后页" PageIndexBoxType="TextBox" PrevPageText="前页" ShowPageIndexBox="Always" SubmitButtonText="Go" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到" PageSize="5" OnPageChanged="pager_PageChanged"></bigying:AspNetPager>
        </div> </form>  
    <div id="uploaddiv">
        
        <%-- 这里用一个隐藏的iframe，将form的target指向iframe，而该iframe是隐藏的，从而达到无刷新上传，ajax一般操作字符串 --%>
        <form method="post" id="f1" enctype="multipart/form-data" action="upload.ashx" target="frame1">
          <%-- 隐藏控件保存paid和pid传递值 --%>
             <input type="hidden" id="paid" name="paid" />
            <input type="hidden" id="pid" name="pid" />
             <table >
                <tr>
                    <td><label id="uploadLog"></label></td>
                    <td><img width="40px" src="" id="imgShow" alt="缩略图" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="file" name="filepath" multiple="multiple" id="fileajax" /></td>
                    
                </tr>
                <tr>
                    <td>
                        <input type="button" value="上传" onclick="Uploadphotoajax()" /></td>
                    <td>
                        <input type="button" value="取消" onclick="Cancleupload()" /></td>
                </tr>

            </table>
        </form>
        <iframe style="display:none" name="frame1" id="frame1"></iframe>
       
    </div>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Blog.UI.Photo
{
    using Blog.BLL;
    using Blog.Model;
    using Blog.Common;
    using System.Drawing;
    /// <summary>
    /// upload 的摘要说明
    /// </summary>
    public class upload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.HttpMethod.ToLower() == "post")
            {
                Uploadphoto(context);
            }
        }

        private static void Uploadphoto(HttpContext context)
        {
            string paid = context.Request.Form["paid"];
            string pid = context.Request.Form["pid"];
            //得到上传来的文件集合判断集合长度，遍历集合元素因为可能是多文件上传
            HttpFileCollection myfilelist = context.Request.Files;
            if (myfilelist.Count > 0)
            {
                for (int i = 0; i < myfilelist.Count; i++)
                {
                    //判断是否为空文件，并且要求为图片文件
                    if (myfilelist[i].ContentLength > 3 && myfilelist[i].ContentType.StartsWith("image/"))
                    {
                        //旧名字到生成新名字随机字符串
                        string oldname = myfilelist[i].FileName;
                        string suffixname = System.IO.Path.GetExtension(oldname);
                        string newname = Guid.NewGuid() + suffixname;
                        string path = "/Upload/Images/" + newname;
                        //把集合中图片放进2进制流，把这个流创建一个img
                        using (Image img = Image.FromStream(myfilelist[i].InputStream))
                        {

                            img.Save(context.Server.MapPath(path));
                            //img.Save(context.Response.OutputStream, img.RawFormat);

                        }
                        BlogPhotoBLL bpBLL = new BlogPhotoBLL();

                        BlogPhoto model = bpBLL.GetModel(int.Parse(pid));
                        model.PSrc = newname;
                        if (bpBLL.Update(model))
                        {
                            context.Response.Write("<script>window.parent.uploadSuccess(‘" + oldname + "上传成功|" + path + "‘);window.parent.location=‘/Photo/PhotoList.aspx?paid="+paid+"‘;</script>");
                            context.Response.End();
                        }
                        else
                        {
                            context.Response.Write("<script>window.parent.uploadSuccess(‘" + oldname + "上传不成功|" + path + "‘);</script>");
                        }
                    }
                }

            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}