您的位置：首页 > 移动开发

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

2016-08-14 11:54 435 查看

前言

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

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

三、小结

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航