【微信平台】艺萌管家APP技术总结（三）——上传和显示图片

妖狐艹你老母 2022-07-19 05:57 168阅读 0赞

# 前言 #

前一段日子自己做了一个上传图片的功能，刚开始的时候还是没有什么思路，数据库用的是MySQL，前台是C\#，其中还是有很多值得挖据的东西。

# 一、上传图片 #

## 前台关键Demo： ##

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="UploadAndShowPictures.Test" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>上传图片和显示图片</title>
        <script src="JS/jquery-1.12.3.min.js"></script>
        <script src="JS/ImageBrowsing.js"></script>
        <script type="text/javascript"> $(document).ready(function (e) { browse('imgUpload00', 'pro_imgs', 300, 160); }); </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <center>
                    <div id="pro_imgs" runat="server">
                        <img src="Image/addpic.jpg" id="headimg" runat="server" />
                    </div>
                    <input id="imgUpload00" name="imgUpload00" runat="server" type="file" accept="image/*" style="filter: alpha(Opacity=10); -moz-opacity: 0.01; opacity: 0.01; width: 100%; height: 108px; margin-top: -108px;" >
                    <asp:Button ID="btnOk" runat="server" Text="提交" OnClick="btnOk_Click" />
                </center>
            </div>
        </form>
    </body>
    </html>

## 后台代码： ##

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Data;
    using MySql.Data.MySqlClient;
    using System.Configuration;
    using System.Data.Common;
    using System.Collections.Generic;
    
    namespace UploadAndShowPictures
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnOk_Click(object sender, EventArgs e)
            {
                bool flagSave = false;
                string uploadName00 = this.imgUpload00.Value;
                string pictureName00 = "";//上传后的图片名，以当前时间为文件名，确保文件名没有重复 
                if (this.imgUpload00.Value != "")
                {
                    int idx = uploadName00.LastIndexOf(".");
                    string suffix = uploadName00.Substring(idx);//获得上传的图片的后缀名 
                    pictureName00 = DateTime.Now.Ticks.ToString() + suffix;
                }
                if (uploadName00 != "")
                {
                    string path = Server.MapPath("Image/");
                    imgUpload00.PostedFile.SaveAs(path + pictureName00);
                }
                else
                {
                    Response.Write("<script language=javascript>alert('请上传身份证正面照片~')");
                    return;
                }
                 //1.获取图片的地址
                string uploadName = "Image/" + pictureName00;
                //2.上传图片到数据库
    
                bool flag = UpdateUserPath(uploadName);
                if (flag)
                {
                    //更新成功
                    Response.Write("<script language=javascript>alert('上传成功~');</script>");
                }
                else
                {
                    //更新失败
                    Response.Write("<script language=javascript>alert('出问题了，请重新尝试~~')");
                }
            }
    
            public bool UpdateUserPath(string uploadName)
            {
                string strSql = "INSERT into ymgj_user (headimg) VALUES ('" + uploadName + "')";
                using (MySqlConnection connection = new MySqlConnection("server=192.168.21.183;database=ymgj_manager;uid=root;pwd=123;charset=gb2312;allow zero datetime=true"))
                {
                    using (MySqlCommand cmd = new MySqlCommand(strSql, connection))
                    {
                        try
                        {
                            connection.Open();
                            int rows = cmd.ExecuteNonQuery();
                            if (rows > 0)
                            {
                                return true;
                            }
                            else
                            {
                                return false;
                            }
    
                        }
                        catch (MySql.Data.MySqlClient.MySqlException e)
                        {
                            connection.Close();
                            throw e;
                        }
                    }
                }
            }
    
        }
    }

# 二、显示图片 #

## 图片获取存在数据库的路径就可以显示图片： ##

#region 获取图片并显示-王雷-2016年7月11日21:23:51
            /// <summary>
            /// 获取图片并显示-王雷-2016年7月11日21:23:51
            /// </summary>
            /// <returns></returns>
            public string Getpicture()
            {
                //1.获取用户的id
                JCZB.YMGJ.Model.ymgj_user user = (JCZB.YMGJ.Model.ymgj_user)Session["User"];
                string uid = user.uid.ToString();
                //根据用户的id获取照片的路径
                string heading = bll.GetHeadimgByUid(uid);
                StringBuilder strDiv = new StringBuilder();
                if (heading == "")
                {
                    //头像不存在
                    strDiv.Append("<img style=\"width:78px; height:78px;\" src=\"../../../Admin/Images/mine/login.png\" onclick=\"javascript:window.location.href='Userinfo.aspx';\" />");
                }
                else
                {
                    //头像存在
                    strDiv.Append("<img style=\"width:78px; height:78px; border-radius:50%; overflow:hidden;\" src=\" ");
                    strDiv.Append(heading);
                    strDiv.Append(" \" onclick=\"javascript:window.location.href='Userinfo.aspx';\" />");
                }
                return strDiv.ToString();
            } 
            #endregion

功能源码：[请移步~(≧▽≦)/~啦啦啦][Link 1]

# 三、小结 #

通过这次的详细的学习这个功能，自己有熟悉了操作，很好的锻炼了自己的动手的能力，以后学习还是要不断的锻炼自己，提高自己对代码的熟练度。加油~

[Link 1]: https://yunpan.cn/c6itru8yP3VuF%20%20%E8%AE%BF%E9%97%AE%E5%AF%86%E7%A0%81%203c85