图片上传的实现

关注

原创最新推荐文章于 2025-07-17 20:04:30 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

如何实现图片上传至服务器发表文章时上传文章封面时上传用户头像时通过编辑器的菜单添加图片。直接复制一张图片粘贴到编辑器中复制外部的图片链接（markdown格式），到编辑器中。导入MD文件到编辑器中（如果图片有连接时）。这四种方式都会出发图片上传功能（严格一点，后面两个还涉及到图片转链）后台的接口都是一样的，都调用的是ImageRestController，上传图片调用的是upload方法，请求参数为HttpServletRequest；转存图片链接调用的是save方法，参数为图片的外部链接。阅读详情

图片上传的功能简介及web.config设置(自动生成所略图)

程序代码：

功能：
1。把图片文件(JPG GIF PNG)上传，
2。保存到指定的路径（在web.config中设置路径，以文件的原有格式保存），
3。并自动生成指定宽度的（在web.config中设置宽度）
4。和指定格式的（在web.config中指定缩略图的格式，支持GIF,JPG,PNG）
5。和原图比例相同的缩略图(根据宽度和原图的宽和高计算所略图的高度)
6。可以判断是否已经存在文件
7。如果不覆盖，则给出错误
8。如果选中"覆盖原图"checkbox，则覆盖原图。
9。可以根据要求，在webform上设置1个以上的file input和相应的checkbox
10。并在文件上传完毕后，显示原图的文件名，尺寸，字节，和
11。缩略图的文件名尺寸，以及
12。显示原图和缩略图。
13。缩略图的文件名格式，以便与管理：
    大图（原图）：图片分类代号_图片代表的日期_图片原有文件名.原有格式（如：28_2002-1-28_test.jpg）
    缩略图：          图片分类代号_图片代表的日期_图片原有文件名.原有格式_thumb.指定的缩略图格式（如：28_2002-1-28_test.jpg_thumb.gif）

----------------------
web.config文件中的相应设置：

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <system.web>
    ...
    ...
    </system.web>
    <appSettings>
        ...
        ...
        ...
        ...
        //FePicSavePath 图片保存在服务器上的实际路径
        <add key="FePicSavePath" value="d:/myroot/myapp/content/fepics/" />
        //FePicWebPath 图片的网络路径，用于显示图片
        <add key="FePicWebPath" value=" http://www.mysite.com/fepics/" />
        //FePicThumbWidth 缩略图的宽度
        <add key="FePicThumbWidth" value="115" />
        //所略图的格式
        <add key="FePicThumbFormat" value="gif" />
    </appSettings>
</configuration>

图片上传的数据库部分(自动生成所略图)

程序代码：

  public int FePicDataSet(string strPicTitle, string strPicDate, string strPicName, int intPicType, string strPicIntro, string strThumbnail, int opID)
        {

            //string strPicTitle,
            //string strPicDate,
            //string strPicName,
            //int intPicType,
            //string strPicIntro,
            //string strPicName,
            //string strThumbnail,
            //int opID
            SqlConnection myConnection = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);
            SqlCommand myCommand = new SqlCommand("mag_FePicDataSet", myConnection);
            // Mark the Command as a SPROC
            myCommand.CommandType = CommandType.StoredProcedure;

            // Add Parameters to SPROC
            SqlParameter parameterUserId = new SqlParameter("@opID", SqlDbType.Int);
            parameterUserId.Value = opID;
            myCommand.Parameters.Add(parameterUserId);

            SqlParameter parameterPicTitle = new SqlParameter("@picTitle", SqlDbType.Char, 30);
            parameterPicTitle.Value = strPicTitle;
            myCommand.Parameters.Add(parameterPicTitle);

            SqlParameter parameterPicDate = new SqlParameter("@picDate", SqlDbType.Char, 10);
            parameterPicDate.Value = strPicDate;
            myCommand.Parameters.Add(parameterPicDate);

            SqlParameter parameterPicName = new SqlParameter("@picName", SqlDbType.Char, 50);
            parameterPicName.Value = strPicName;
            myCommand.Parameters.Add(parameterPicName);

            SqlParameter parameterPicType = new SqlParameter("@picType", SqlDbType.Int);
            parameterPicType.Value = intPicType;
            myCommand.Parameters.Add(parameterPicType);

            SqlParameter parameterPicIntro = new SqlParameter("@picIntro", SqlDbType.Char, 255);
            parameterPicIntro.Value = strPicIntro;
            myCommand.Parameters.Add(parameterPicIntro);

            SqlParameter parameterThumbnail = new SqlParameter("@thumbnail", SqlDbType.Char, 50);
            parameterThumbnail.Value = strThumbnail;
            myCommand.Parameters.Add(parameterThumbnail);

            SqlParameter parameterHostAddress = new SqlParameter("@opIP", SqlDbType.Char, 15);
            parameterHostAddress.Value = Context.Request.UserHostAddress;
            myCommand.Parameters.Add(parameterHostAddress);

            //SqlParameter parameterRID = new SqlParameter("@returnID", SqlDbType.Int);
            //parameterReturnUserID.Value = -1;
            //parameterRID.Direction = ParameterDirection.Output;
            //myCommand.Parameters.Add(parameterRID);



            // Execute the command in a try/catch to catch duplicate username errors
            try
            {
                // Open the connection and execute the Command
                myConnection.Open();
                myCommand.ExecuteNonQuery();
            }
            catch
            {

                // failed to create a new user
                return -1;
            }
            finally
            {

                // Close the Connection
                if (myConnection.State == ConnectionState.Open)
                    myConnection.Close();
            }

            return 1;

        }

图片上传的Codebehind(自动生成所略图)

程序代码：

using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
using cj168.util;

namespace cj168.Web.Mag.Admins.FeData
{
    /// <summary>
    /// Summary description for fedata.
    /// </summary>
    public class feUploadPic : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.TextBox txtboxPicTitle;
        protected System.Web.UI.WebControls.Calendar calPicDate;
        protected System.Web.UI.WebControls.DropDownList ddlPicType;
        protected System.Web.UI.WebControls.TextBox txtboxPicIntro;
        protected System.Web.UI.HtmlControls.HtmlInputFile filePicName;
        protected System.Web.UI.WebControls.Button btnSubmit;
        protected System.Web.UI.WebControls.Label lblPicInfo;
        protected System.Web.UI.WebControls.TextBox txtboxPicDate;
        protected System.Web.UI.WebControls.RequiredFieldValidator Requiredfieldvalidator1;
        protected System.Web.UI.WebControls.RegularExpressionValidator vldCatName;
        protected System.Web.UI.WebControls.RequiredFieldValidator Requiredfieldvalidator2;
        protected System.Web.UI.WebControls.CustomValidator CustomValidator1;
        protected System.Web.UI.WebControls.RegularExpressionValidator RegularExpressionValidator1;
        protected System.Web.UI.WebControls.HyperLink hlkOriPic;
        protected System.Web.UI.WebControls.HyperLink hlkNewPic;
        protected System.Web.UI.WebControls.RegularExpressionValidator Regularexpressionvalidator2;
        protected System.Web.UI.WebControls.RegularExpressionValidator Regularexpressionvalidator3;
        protected System.Web.UI.WebControls.CheckBoxList checkboxlistRewrite;



        private void Page_Load(object sender, System.EventArgs e)
        {
            // Put user code to initialize the page here
            //if(Page.IsPostBack)
            //txtboxPicDate.Text = calPicDate.SelectedDate.ToString();

            if(!Page.IsPostBack)
            {
                Bind2DropDownListPicType();

                //for(int i = 0;i < Request.Files.Count; i++)
                //{
                //    checkboxlistRewrite.Items.Selected = false;
                //}
            }



        }

        public void Bind2DropDownListPicType()
        {
            cj168.DataAccess.Admins admins = new cj168.DataAccess.Admins();
            DataSet ds = admins.FePicTypeGet();
            //ddlPicType.DataSource = ;
            DataView dv = new DataView(ds.Tables["PicType"]);

            DataRowView drv = dv.AddNew();
            //DataColumnView dcv = dv.AddNew();
            drv["Title"] = "请选择";
            drv["fePicTypeID"] = "0";
            drv.EndEdit();


            dv.Sort = "fePicTypeID";

            ddlPicType.DataSource = dv;

            ddlPicType.DataBind();
        }

        public void UploadFile(object sender, System.EventArgs e)
        {

                string imgNameOnly, imgNameNoExt, imgExt;
                string imgThumbnail;
                int erroNumber = 0;
                System.Drawing.Image oriImg, newImg;
                string strFePicSavePath = ConfigurationSettings.AppSettings["FePicSavePath"].ToString();
                string strFePicThumbFormat = ConfigurationSettings.AppSettings["FePicThumbFormat"].ToString().ToLower();
                int intFeThumbWidth = Int32.Parse(ConfigurationSettings.AppSettings["FePicThumbWidth"]);
                string fileExt;
                string strPicTitle = txtboxPicTitle.Text;
                string strPicIntro = txtboxPicIntro.Text;
                string strPicDate = txtboxPicDate.Text;

                int intPicType = Int32.Parse(ddlPicType.SelectedItem.Value);
                string strPicType = intPicType.ToString() + "_" + DateTime.Now.Date.ToShortDateString() + "_";
                string strFePicWebPath = ConfigurationSettings.AppSettings["FePicWebPath"];

                cj168.DataAccess.Admins admins = new cj168.DataAccess.Admins();

                //if(admins.FePicTypeSet(textboxTitle.Text,0) < 0)
                //    lblAddPicInfo.Text = "操作失败：已经存在相同名称类型，请修改";
                //else
                //    lblAddPicInfo.Text = "操作成功";

                StringBuilder picInfo = new StringBuilder();



            if(Page.IsValid)
            {


                for(int i = 0;i < Request.Files.Count; i++)
                {
                    HttpPostedFile PostedFile = Request.Files;
                    fileExt = (System.IO.Path.GetExtension(PostedFile.FileName)).ToString().ToLower();
                    //5-test.jpg
                    imgNameOnly = strPicType + System.IO.Path.GetFileName(PostedFile.FileName);
                    if(fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".png")
                    {

                        if(System.IO.File.Exists(strFePicSavePath + imgNameOnly) && (checkboxlistRewrite.Items.Selected == false))
                        {
                            erroNumber = erroNumber + 1;
                            picInfo.Append("<b>错误：</b>文件("+ (i+1) +") " + imgNameOnly + " 已经存在，请修改文件名<br>" );
                        }
                    }
                    else
                    {
                        erroNumber = erroNumber + 1;
                        if(fileExt == "")
                            picInfo.Append("<b>错误：</b>请选择文件<br>" );
                        else
                        picInfo.Append("<b>错误：</b>文件("+ (i+1) +") " + imgNameOnly + " 扩展名 " + fileExt + " 不被许可<br>" );
                    }

                }

                if(erroNumber > 0)
                {
                    picInfo.Append("<font color=red>全部操作均未完成，请修改错误，再进行操作</font><br>");

                    hlkOriPic.ImageUrl = "";
                    hlkOriPic.ToolTip = "";
                    hlkNewPic.ImageUrl = "";
                    hlkNewPic.ToolTip = "";
                }
                else
                {
                    for(int i = 0;i < Request.Files.Count; i++)
                    {

                        HttpPostedFile PostedFile = Request.Files;
                        imgNameOnly = strPicType + System.IO.Path.GetFileName(PostedFile.FileName);
                        imgNameNoExt = System.IO.Path.GetFileNameWithoutExtension(PostedFile.FileName);
                        imgExt = System.IO.Path.GetExtension(PostedFile.FileName).ToString().ToLower();


                        oriImg = System.Drawing.Image.FromStream(PostedFile.InputStream);
                        newImg = oriImg.GetThumbnailImage(intFeThumbWidth, intFeThumbWidth * oriImg.Height/oriImg.Width,null,new System.IntPtr(0));
                        switch(imgExt)
                        {
                            //case ".jpeg":
                            case ".jpg":
                                oriImg.Save(strFePicSavePath + imgNameOnly , System.Drawing.Imaging.ImageFormat.Jpeg);
                                break;
                            case ".gif":
                                oriImg.Save(strFePicSavePath + imgNameOnly , System.Drawing.Imaging.ImageFormat.Gif);
                                break;
                            case ".png":
                                oriImg.Save(strFePicSavePath + imgNameOnly , System.Drawing.Imaging.ImageFormat.Png);
                                break;
                        }

                        //oriImg.Save(ConfigurationSettings.AppSettings["FePicSavePath"] + imgNameNoExt + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);


                        switch(strFePicThumbFormat)
                        {
                                //jpeg format can get the smallest file size, and the png is the largest size
                            //case "jpeg":
                            case "jpg":
                                newImg.Save(strFePicSavePath + imgNameOnly + "_thumb.jpg",System.Drawing.Imaging.ImageFormat.Jpeg);
                                imgThumbnail = imgNameOnly + "_thumb.jpg";
                                break;
                            case "gif":
                                newImg.Save(strFePicSavePath + imgNameOnly + "_thumb.gif",System.Drawing.Imaging.ImageFormat.Gif);
                                imgThumbnail = imgNameOnly + "_thumb.gif";
                                break;
                            case "png":
                                newImg.Save(strFePicSavePath + imgNameOnly + "_thumb.png",System.Drawing.Imaging.ImageFormat.Png);
                                imgThumbnail = imgNameOnly + "_thumb.png";
                                break;
                            default:
                                newImg.Save(strFePicSavePath + imgNameOnly + "_thumb.jpg",System.Drawing.Imaging.ImageFormat.Jpeg);
                                imgThumbnail = imgNameOnly + "_thumb.jpg";
                                break;

                        }//switch

                        picInfo.Append("<b>文件　名：</b>" + imgNameOnly + " ( " + oriImg.Width + " x " + oriImg.Height + " ) " + PostedFile.ContentLength/1024 + "KB<br>");
                        picInfo.Append("<b>缩略图名：</b>" + imgThumbnail + " ( " + newImg.Width + " x " + newImg.Height + " )<br><br>");

                        hlkOriPic.ImageUrl = strFePicWebPath + imgNameOnly;
                        hlkOriPic.ToolTip = "◆原图◆n文件名：" + imgNameOnly + "n尺寸：" + oriImg.Width + " x " + oriImg.Height + "n字节：" + PostedFile.ContentLength/1024 + "KB";
                        hlkNewPic.ImageUrl = strFePicWebPath + imgThumbnail;
                        hlkNewPic.ToolTip = "◆缩略图◆n文件名：" + imgThumbnail + "n尺寸：" + newImg.Width + " x " + newImg.Height;


                        oriImg.Dispose();
                        newImg.Dispose();
                        picInfo.Append("<font color=red>图片上传成功</font><br>");
                        if(admins.FePicDataSet(strPicTitle, strPicDate, imgNameOnly, intPicType, strPicIntro, imgThumbnail,0) < 0)
                            picInfo.Append("<font color=red>保存信息到数据库失败</font><br>");
                        else
                            picInfo.Append("<font color=red>保存信息到数据库成功</font><br>");

                    }//for
                    picInfo.Append("<font color=red>所有操作成功</font><br>");

                }// if erronumber = 0



            }
            else
            {
                picInfo.Append("<font color=red>有错误，请检查。操作未成功</font><br>");

                hlkOriPic.ImageUrl = "";
                hlkOriPic.ToolTip = "";
                hlkNewPic.ImageUrl = "";
                hlkNewPic.ToolTip = "";

            }

            for(int i = 0;i < Request.Files.Count; i++)
            {
                checkboxlistRewrite.Items.Selected = false;
            }

            lblPicInfo.Text = picInfo.ToString();

        }

        public void CalDateSelected(object sender,System.EventArgs e)
        {
            txtboxPicDate.Text = calPicDate.SelectedDate.ToShortDateString();

        }

        public void ServerValidateCheckDate(object sender, System.Web.UI.WebControls.ServerValidateEventArgs value)
        {
            cj168.util.iUtil iUtils = new cj168.util.iUtil();
            if(!iUtils.IsDate(value.Value))
                value.IsValid = false;
            else
                value.IsValid = true;

        }



        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
                                                                    {
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

图片上传的WebForm(自动生成所略图)

程序代码：

<%@ Page language="c#" Codebehind="feUploadPic.aspx.cs" AutoEventWireup="false" Inherits="cj168.Web.Mag.Admins.FeData.feUploadPic" %>
<%@ Register TagPrefix="cj168" TagName="Header" Src="modules/headerFe.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>fedata</title>
        <meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content=" http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <style>BODY { FONT-SIZE: 9pt }
    .calPicDate { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Helvetica, sans-serif }
    .valid { FONT-SIZE: 9pt; COLOR: red }
    TD { FONT-SIZE: 9pt }
        </style>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <table width="100%">
            <tr>
                <td><cj168:header id="Header1" runat="server"></cj168:header></td>
            </tr>
        </table>
        <form id="fedata" method="post" encType="multipart/form-data" runat="server">
            <TABLE id="Table1" cellSpacing="0" cellPadding="1" width="750" border="1">
                <TR>
                    <TD width="70">图片标题</TD>
                    <TD><asp:textbox id="txtboxPicTitle" runat="server"></asp:textbox><br>
                        <asp:requiredfieldvalidator id="Requiredfieldvalidator1" runat="server" ErrorMessage="请填写图片标题。" CssClass="valid" ControlToValidate="txtboxPicTitle"></asp:requiredfieldvalidator><br>
                        <asp:regularexpressionvalidator id="vldCatName" ErrorMessage="图片标题至少2个字符，不应包含'“ ” ! @ # $ % ^ & * ( ) < > 《》{ } [ ] ? 。，？￥" CssClass="valid" ControlToValidate="txtboxPicTitle" ValidationExpression="[^'^“^”^^!^@^#^$^%^^^&^*^(^)^<^>^《^》^?^。^，^？^￥^{^}^][^]]{2,}" Runat="server"></asp:regularexpressionvalidator></TD>
                </TR>
                <TR>
                    <TD>图片日期</TD>
                    <TD><asp:textbox id="txtboxPicDate" runat="server" Width="300"></asp:textbox><asp:calendar id="calPicDate" runat="server" CssClass="calPicDate" Width="300" SelectMonthText="本月" SelectWeekText="本周" NextPrevFormat="FullMonth" OnSelectionChanged="CalDateSelected">
                            <NextPrevStyle CssClass="calPicDate"></NextPrevStyle>
                            <WeekendDayStyle ForeColor="red"></WeekendDayStyle>
                            <TodayDayStyle Font-Bold="True" ForeColor="red" BackColor="#ccccff"></TodayDayStyle>
                            <SelectedDayStyle BackColor="black" Font-Bold="true"></SelectedDayStyle>
                        </asp:calendar><BR>
                        <asp:requiredfieldvalidator id="Requiredfieldvalidator2" runat="server" ErrorMessage="请选择或填写图片日期。" CssClass="valid" ControlToValidate="txtboxPicDate"></asp:requiredfieldvalidator><br>
                        <asp:customvalidator id="CustomValidator1" ErrorMessage="不是个有效的日期格式" CssClass="valid" ControlToValidate="txtboxPicDate" Runat="server" OnServerValidate="ServerValidateCheckDate"></asp:customvalidator></TD>
                </TR>
                <TR>
                    <TD>图片分类</TD>
                    <TD><asp:dropdownlist id="ddlPicType" runat="server" DataValueField="fePicTypeID" DataTextField="Title"></asp:dropdownlist><FONT face="宋体"> </FONT><asp:regularexpressionvalidator id="RegularExpressionValidator1" ErrorMessage="请选择图片分类" CssClass="valid" ControlToValidate="ddlPicType" ValidationExpression="[^0]{1,}" Runat="server"></asp:regularexpressionvalidator></TD>
                </TR>
                <TR>
                    <TD>图片介绍</TD>
                    <TD><asp:textbox id="txtboxPicIntro" runat="server" MaxLength="255" TextMode="MultiLine" Columns="50" Rows="5"></asp:textbox>
                        <asp:RegularExpressionValidator id="Regularexpressionvalidator2" Runat="server" CssClass="valid" ErrorMessage="内容中不应包含 ' <  >" ControlToValidate="txtboxPicIntro" ValidationExpression="[^'^<^>]{0,}"></asp:RegularExpressionValidator>
                    </TD>
                </TR>
                <tr>
                    <td colSpan="2">(支持文件格式：Jpg, Gif, Png)</td>
                </tr>
            </TABLE>
            <table cellSpacing="0" width="750" border="1">
                <tr>
                    <td width="70">图片名称</td>
                    <td width="300"><INPUT title="浏览" type="file" size="25" name="filePicName" runat="server" ID="filePicName">
                        <asp:RegularExpressionValidator id="Regularexpressionvalidator3" Runat="server" CssClass="valid" ErrorMessage="文件名只能由字母或数字组成，不能包含 - _ 等其他符号长度至少为1" ControlToValidate="filePicName" ValidationExpression="[ :./a-zA-Z0-9]{1,}"></asp:RegularExpressionValidator>
                    </td>
                    <td><asp:checkboxlist id="checkboxlistRewrite" runat="server" BorderWidth="0" Height="100%" CellPadding="5" RepeatLayout="Table" RepeatColumns="1" RepeatDirection="Vertical">
                            <asp:ListItem Value="1">覆盖原有图片</asp:ListItem>
                        </asp:checkboxlist></td>
                </tr>
            </table>
            <table cellSpacing="0" width="750" border="1">
                <TR>
                    <TD align="middle"><asp:button id="btnSubmit" onclick="UploadFile" runat="server" Text="确定"></asp:button></TD>
                </TR>
                <TR>
                    <TD><asp:label id="lblPicInfo" runat="server">Label</asp:label></TD>
                </TR>
                <TR>
                    <TD><FONT face="宋体"></FONT>
                    </TD>
                </TR>
            </table>
        </form>
        <asp:HyperLink id="hlkOriPic" runat="server">原图</asp:HyperLink>
        <asp:HyperLink id="hlkNewPic" runat="server">缩略图</asp:HyperLink>
    </body>
</HTML>

收录于