自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图<原创>

如图:

点击浏览,选择图片之后,右面显示图片

第一步:

创建CtFileUpLoad.ascx

代码

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CtFileUpLoad.ascx.cs"
    Inherits="WebParts_CtFileUpLoad" %>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <iframe src="/WebParts/FileUpLoad.aspx?<%=ParsValue %>" width="240px" height="22px" frameborder="0" scrolling="no"></iframe>
        </td>
        <td>
            <asp:TextBox runat="server" ID="tbFileName" style="display:none"></asp:TextBox>
            <div id="dvImg" runat="server" style="position:absolute; margin-left:50px;">
            </div>
        </td>
    </tr>
</table>
<script language="javascript">
    function <%=ClientID %>CallLoaded()
    {
        <% =OnLoaded %>;
    }
</script>

.cs代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;

public partial class WebParts_CtFileUpLoad : System.Web.UI.UserControl
{
    public bool AutoFileName
    {
        get
        {
            object ob = ViewState[ClientID + "AutoFileName"];
            if (ob == null)
                ob = true;
            return (bool)ob;
        }
        set
        {
            ViewState[ClientID + "AutoFileName"] = value;
        }
    }
    public string UpLoadPath
    {
        get
        {
            object ob = ViewState[ClientID + "UpLoadPath"];
            if (ob == null)
                ob = "UPLOADFILES";
            return ob.ToString();
        }
        set
        {
            ViewState[ClientID + "UpLoadPath"] = value;
        }
    }
    public string OnLoaded
    {
        get
        {
            object ob = ViewState[ClientID + "OnLoaded"];
            if (ob == null)
                ob = "";
            return ob.ToString();
        }
        set
        {
            ViewState[ClientID + "OnLoaded"] = value;
        }
    }
    public string SupportExtension
    {
        get
        {
            object ob = ViewState[ClientID + "SupportExtension"];
            if (ob == null)
            {
                ob = "gif|png|jpeg|jpg";
            }
            return ob.ToString();
        }
        set
        {
            ViewState[ClientID + "SupportExtension"] = value.Replace(".", "");
        }
    }
    public bool ShowImg
    {
        get
        {
            object ob = ViewState[ClientID + "ShowImg"];
            if (ob == null)
                ob = true;
            return (bool)ob;
        }
        set
        {
            if ((bool)value)
                dvImg.Style["display"] = "block";
            else
                dvImg.Style["display"] = "none";
        }
    }
    public string FileName
    {
        get
        {
            return tbFileName.Text;
        }
    }
    protected string ParsValue = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        ParsValue = "AutoFileName=" + AutoFileName.ToString() + "&SupportExtension=" + SupportExtension + "&UpLoadPath=" + UpLoadPath
            + "&ID=" + ClientID;
    }
}

第二步:

创建FileUpLoad.aspx

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUpLoad.aspx.cs" Inherits="WebParts_FileUpLoad" %>

<!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">
</head>
<body style="margin:0px;">
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload runat="server" ID="FileUpload1" onchange="upload(this);" />
        <asp:Button runat="server" ID="btUp" style="display:none" OnClick="btUp_Click" />
    </div>
    </form>
</body>
</html>
<script language="javascript">
    function upload(ob)
    {
        var expStr=/.*(<%=SupportExtension%>)$/i;
        if(!expStr.test(ob.value))
        {
            alert("上传文件类型有误。\n(支持文件类型：<%=SupportExtension%>)");
        }
        else
        {
            var btUp=document.getElementById("<%=btUp.ClientID %>");
            btUp.click();
            
        }
    }
</script>

代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Drawing;
using System.IO;
public partial class WebParts_FileUpLoad : System.Web.UI.Page
{
    protected string SupportExtension = "";
    protected string UpLoadPath = "";
    protected bool AutoFileName;
    protected string ParentID = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        SupportExtension = Request.QueryString["SupportExtension"];
        UpLoadPath = Request.QueryString["UpLoadPath"];
        AutoFileName = bool.Parse(Request.QueryString["AutoFileName"].ToString());
        ParentID = Request.QueryString["ID"].ToString();
    }
    protected void btUp_Click(object sender, EventArgs e)
    {
        Boolean fileOK = false;
        if (FileUpload1.HasFile)
        {
            String fileExtension =
                    System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
            String[] allowedExtensions = SupportExtension.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
            for (int i = 0; i < allowedExtensions.Length; i++)
            {
                if (fileExtension == "." + allowedExtensions[i])
                {
                    fileOK = true;
                }
            }
            if (fileOK)
            {

                string path = "";
                string name = "";
                string sPath = "";

                if (AutoFileName)
                {
                    name = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
                }
                else
                {
                    name = FileUpload1.FileName;
                }
                sPath = Request.PhysicalApplicationPath + "\\" + UpLoadPath + "\\";
                path = sPath + name; //图片地址

                string fileName = name;              //文件名
                string fileName_s = "s_" + name;   //缩略图文件名称

                try
                {

                    //FileInfo file = new FileInfo(name);
                    // string fileContentType = FileUpload1.PostedFile.ContentType;
                    //string name = FileUpload1.PostedFile.FileName;//客户端文件路径

                    //string fileName_sy = "sy_" + file.Name; //水印图文件名称(文字)
                    //string fileName_syp = "syp_" + file.Name;//水印图文件名称(图片)

                    //string webFilePath = Server.MapPath(UpLoadPath + "\\" + fileName); 
                    //string webFilePath_s = Server.MapPath(UpLoadPath + "\\" + fileName_s);

                    string webFilePath = sPath + fileName;//服务器端文件路径
                    string webFilePath_s = sPath + fileName_s;//服务器端缩略图路径


                    if (!File.Exists(webFilePath))
                    {
                        if (FileUpload1.PostedFile.ContentLength < 2 * 1024 * 1024) //如果图片小于2M
                        {
                            try
                            {
                                FileUpload1.SaveAs(path);        //使用saveAS方法保存文件   

                                System.Drawing.Image image = System.Drawing.Image.FromFile(path);
                                if (image.Width > 800 || image.Height > 600)
                                {
                                    MakeThumbnail(webFilePath, webFilePath_s, 800, 600, "W");//生成缩略图的方法
                                }
                                else
                                {
                                    MakeThumbnail(webFilePath, webFilePath_s, 300, 230, "W");//生成缩略图的方法
                                }
                                image.Dispose();

                                // AddShuiYinWord(webFilePath, webFilePath_sy); //保存水印文字图片
                                // AddShuiYinPic(webFilePath, webFilePath_syp, webFilePath_sypf);//保存添加水印图片之后的图片
                                //MakeThumbnail(webFilePath, webFilePath_s, 400, 300, "W");//生成缩略图的方法


                                Page.RegisterClientScriptBlock("succcess", @"<script>
                                                    alert('上传成功');
                                                    parent.document.getElementById('" + ParentID + "_" + "tbFileName" + @"').value='" + fileName_s + @"';
                                            </script>");
                            }
                            catch (Exception ex)
                            {
                                Page.RegisterClientScriptBlock("err", "<script>alert('提示：文件上传失败，失败原因：：" + ex.Message + "');</script>");
                            }
                        }
                        else
                        {

                            Page.RegisterClientScriptBlock("err", "<script>alert('提示：图片不能大于2M');</script>");
                        }
                    }
                    else
                    {
                        this.Page.RegisterClientScriptBlock("err", "<script>alert('图片重复');</script>");

                    }

                }
                catch (System.Exception err)
                {
                    this.Page.RegisterClientScriptBlock("err", "<script>alert('" + err.Message + "');</script>");
                }

                try
                {
                    Bitmap bmp = new Bitmap(path);
                    int width = 0, height = 0;
                    int dvalue = 200;
                    if (bmp.Width < dvalue & bmp.Height < 200)
                    {
                        width = bmp.Width;
                        height = bmp.Height;
                    }
                    else if (bmp.Width > bmp.Height)
                    {
                        width = dvalue;
                        height = dvalue * (bmp.Width / bmp.Height);
                    }
                    else
                    {
                        height = dvalue;
                        width = dvalue * (bmp.Height / bmp.Width);
                    }

                    this.Page.RegisterClientScriptBlock("show", @"<script>
                                parent.VarValue='" + UpLoadPath + "/" + fileName_s + "';" +
                             "parent." + ParentID + "CallLoaded();" +
                             "parent.document.getElementById('" + ParentID + "_" + "dvImg" + @"').innerHTML=""" +
                                                               "<img src='http://www.cnblogs.com/http://www.cnblogs.com/" + UpLoadPath + "/" + fileName_s + "' style='" + width.ToString() + "px; height:" + height + "px;'/>" + @""";
                        </script>");

                    bmp.Dispose();

                }
                catch
                {
                }
                finally
                {
                    //****判断该文件是否存在,如果存在,则删除图片   
                    if (File.Exists(path))
                    {
                        //****删除用户客户端上传的图片,服务器上只保存缩略之后的图片  
                        File.Delete(path);
                    }

                }

            }
            else
            {
                this.Page.RegisterClientScriptBlock("err", "<script>alert('error');</script>");
            }
        }
    }
    /// <summary>
    /// 生成缩略图
    /// </summary>
    /// <param name="originalImagePath">源图路径（物理路径）</param>
    /// <param name="thumbnailPath">缩略图路径（物理路径）</param>
    /// <param name="width">缩略图宽度</param>
    /// <param name="height">缩略图高度</param>
    /// <param name="mode">生成缩略图的方式</param>    
    public void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
    {
        System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);

        int towidth = width;
        int toheight = height;

        int x = 0;
        int y = 0;
        int ow = originalImage.Width;
        int oh = originalImage.Height;

        switch (mode)
        {
            case "HW"://指定高宽缩放（可能变形）                
                break;
            case "W"://指定宽，高按比例                    
                toheight = originalImage.Height * width / originalImage.Width;
                break;
            case "H"://指定高，宽按比例
                towidth = originalImage.Width * height / originalImage.Height;
                break;
            case "Cut"://指定高宽裁减（不变形）                
                if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
                {
                    oh = originalImage.Height;
                    ow = originalImage.Height * towidth / toheight;
                    y = 0;
                    x = (originalImage.Width - ow) / 2;
                }
                else
                {
                    ow = originalImage.Width;
                    oh = originalImage.Width * height / towidth;
                    x = 0;
                    y = (originalImage.Height - oh) / 2;
                }
                break;
            default:
                break;
        }

        //新建一个bmp图片
        System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);

        //新建一个画板
        System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

        //设置高质量插值法
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

        //设置高质量,低速度呈现平滑程度
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

        //清空画布并以透明背景色填充
        g.Clear(System.Drawing.Color.Transparent);

        //在指定位置并且按指定大小绘制原图片的指定部分
        g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight),
            new System.Drawing.Rectangle(x, y, ow, oh),
            System.Drawing.GraphicsUnit.Pixel);

        try
        {
            //以jpg格式保存缩略图
            bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
        }
        catch (System.Exception e)
        {
            throw e;
        }
        finally
        {
            originalImage.Dispose();
            bitmap.Dispose();
            g.Dispose();
        }
    }
    /// <summary>
    /// 在图片上增加文字水印
    /// </summary>
    /// <param name="Path">原服务器图片路径</param>
    /// <param name="Path_sy">生成的带文字水印的图片路径</param>
    protected void AddShuiYinWord(string Path, string Path_sy)
    {
        string addText = "http://www.cnblogs.com/qixuejia";
        System.Drawing.Image image = System.Drawing.Image.FromFile(Path);
        System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(image);
        g.DrawImage(image, 0, 0, image.Width, image.Height);
        System.Drawing.Font f = new System.Drawing.Font("Verdana", 16);
        System.Drawing.Brush b = new System.Drawing.SolidBrush(System.Drawing.Color.Blue);

        g.DrawString(addText, f, b, 15, 15);
        g.Dispose();

        image.Save(Path_sy);
        image.Dispose();
    }

    /// <summary>
    /// 在图片上生成图片水印
    /// </summary>
    /// <param name="Path">原服务器图片路径</param>
    /// <param name="Path_syp">生成的带图片水印的图片路径</param>
    /// <param name="Path_sypf">水印图片路径</param>
    protected void AddShuiYinPic(string Path, string Path_syp, string Path_sypf)
    {
        System.Drawing.Image image = System.Drawing.Image.FromFile(Path);
        System.Drawing.Image copyImage = System.Drawing.Image.FromFile(Path_sypf);
        System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(image);
        g.DrawImage(copyImage, new System.Drawing.Rectangle(image.Width - copyImage.Width, image.Height - copyImage.Height, copyImage.Width, copyImage.Height), 0, 0, copyImage.Width, copyImage.Height, System.Drawing.GraphicsUnit.Pixel);
        g.Dispose();

        image.Save(Path_syp);
        image.Dispose();
    }
}

属性:

SupportExtension 自定义上传的格式,用"|"分隔;
UpLoadPath 　　自定义上传到服务器的文件夹;
AutoFileName　　ture表示根据时间自动生成文件名,不会重复,false表示原来的图片名称,重复会覆盖.

转载请注明出处

2009-12-24 18:39:27 by 齐学佳

祝大家圣诞节快乐

相关阅读:
Linux常用命令大全
 Shell常用命令整理
 登录织梦后台提示用户名不存在的解决方法介绍
 dedecms系统后台登陆提示用户名密码不存在
 dede被注入后台提示用户名不存在解决方法
 织梦dedecmsV5.7联动类型无法显示的处理方法
 漏洞安全防范
 Sublime 安装、插件CoolFormat
如何查看sublime安装了哪些插件
 本地如何使用phpstudy环境搭建多站点
原文地址：https://www.cnblogs.com/qixuejia/p/FileUpLoad.html