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

本文链接：https://blog.csdn.net/kisscatforever/article/details/52175549

前言

前一段日子自己做了一个上传图片的功能，刚开始的时候还是没有什么思路，数据库用的是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