標籤：base64
C#Base64篇：Base64與Image互轉篇：主要講解依據業務需求開發圖片展示與圖片儲存
TODO：
1，新增頁面，儲存路徑名
2，查看頁面，資料來源於其它表，讀取base64資料格式圖片轉換為圖片顯示
講解篇：1，新增頁面，儲存路徑名2，查看頁面，資料來源於其它表，讀取base64資料格式圖片轉換為圖片顯示
1，新增頁面，儲存路徑名
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Event.aspx.cs" Inherits="HMFW.Web.Pages.AndroidAPP.Event" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <%-- <script src="/Js/jquery-1.4.1.min.js"></script>--%> <script src="/Js/AndroidAPP/jquery-1.7.2.js"></script> <script src="/Js/jquery.pager.js"></script> <link href="/css/AndroidAPP/Pager.css" rel="stylesheet" /> <link href="/css/AndroidAPP/jqbase.css" rel="stylesheet" /> <link href="/css/AndroidAPP/reset.css" rel="stylesheet" /> <link href="/css/AndroidAPP/zyUpload.css" rel="stylesheet" /> <script src="/Js/AndroidAPP/zyFile.js"></script> <script src="/Js/AndroidAPP/zyUpload.js"></script> <script src="/Js/My97DatePicker/WdatePicker.js"></script> <script src="/Js/AndroidAPP/Common.js"></script> <script src="/Js/AndroidAPP/Event.js"></script> <script src="/Js/jquery.form.js"></script> <script src="/Js/jquery.validate.js"></script> <style type="text/css"> .add { border-top: 1px solid #EEEEEE; border-left: 1px solid #EEEEEE; } .add tbody td { border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; font: 16px/36px "microsoft yahei"; color: #333333; padding: 2px 5px; } .add tbody td input { border: 1px solid #DDDDDD; height: 30px; width: 300px; padding: 0px 5px; font: 16px/30px "microsoft yahei"; } .add tbody td textarea { border: 1px solid #DDDDDD; height: 100px; width: 680px; padding: 5px; font: 14px/26px "microsoft yahei"; margin: 5px 0px; } .add tbody td input.ssbtn { width: 100px; height: 32px; background: #0073c6; border: none; color: #FFFFFF; font: 16px/32px "microsoft yahei"; margin: 5px 0px; } .add tbody td .red { color: #FF0000; padding-right: 5px; font: bold 16px/36px "microsoft yahei"; } </style> <script type="text/javascript"> $(function () {//Img1..hidImg1 $("input[id*='delPic']").click(function () { if (!confirm("是否確定刪除圖片？")) { return false; } }); $("#Img1").click(function () { }); }); function CheckUpLoad(obj) { var picPath = $(obj).val(); if (picPath == "") { alert("請選擇需要上傳的圖片！"); return false; } } </script></head><body> <form id="form1" runat="server"> <div class="jq-top"> <div class="top-content"> <a href="javascript:history.go(-1)" class="top-left-action"><span class="icon icon-back"></span></a> <h2 class="top-title">第一時間</h2> <a href="main.aspx" class="top-right-action"><span class="icon icon-home"></span></a> </div> </div> <table id="T_Content" width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="add"> <tbody> <tr> <td width="30%" align="right">圖片顯示：</td> <td> <img id="Img1" runat="server" src="~/Images/AndroidAPP/zyUpload/add_img.png" width="100" height="100" alt="暫無圖片" /> <input id="hidImg1" type="hidden" runat="server" /> <img id="Img2" runat="server" src="~/Images/AndroidAPP/zyUpload/add_img.png" width="100" height="100" alt="暫無圖片" /> <input id="hidImg2" type="hidden" runat="server" /> </td> </tr> <tr> <td align="right">圖片地址：</td> <td> <div id="upload"> <input type="file" id="file1" runat="server" /> <asp:Button ID="bthUpLoad1" runat="server" OnClientClick="return CheckUpLoad(file1)" OnClick="bthUpLoad1_ServerClick" Text="上傳" Width="80" /> <asp:Button ID="delPic1" runat="server" Text="刪除" Width="80" OnClick="delPic1_Click" /> </div> <div id="Div1"> <input type="file" id="file2" runat="server" /> <asp:Button ID="bthUpLoad2" runat="server" OnClientClick="return CheckUpLoad(file2)" OnClick="bthUpLoad2_ServerClick" Text="上傳" Width="80" /> <asp:Button ID="delPic2" runat="server" Text="刪除" Width="80" OnClick="delPic2_Click" /> </div> <%-- <div id="Div2"> <input type="file" id="File3" runat="server" /> <asp:Button ID="bthUpLoad3" runat="server" Text="上傳" OnClick="bthUpLoad3_Click" Width="80" /> </div> <div id="Div3"> <input type="file" id="File4" runat="server" /> <asp:Button ID="bthUpLoad4" runat="server" Text="上傳" OnClick="bthUpLoad4_Click" Width="80" /> </div>--%> </td> </tr> <tr> <td align="right"><span class="red">*</span>事件標題：</td> <td> <input type="text" name="sEventTitle" id="sEventTitle" runat="server" /> </td> </tr> <!-- <tr> <td align="right">圖片地址：</td> <td> <input type="text" name="textfield2" id="text1" /> <input type="submit" name="Submit" value="拍照" class="ssbtn" /> <input type="submit" name="Submit" value="瀏覽" class="ssbtn" /></td> </tr> --> <tr> <td align="right"><span class="red">*</span>錄入人：</td> <td> <input type="text" name="sInputPerson" id="sInputPerson" /></td> </tr> <tr> <td align="right"><span class="red">*</span>錄入日期：</td> <td> <asp:TextBox ID="dInputDate" runat="server" class="srk001" EnableTheming="false" onclick="WdatePicker({maxDate:'%y-%M-#{%d}'})"></asp:TextBox> </td> </tr> <tr> <td align="right"><span class="red">*</span>內容：</td> <td> <textarea name="sContent" id="sContent" cols="45" rows="5"></textarea></td> </tr> <tr> <td align="right">備忘：</td> <td> <textarea name="sMemo" id="sMemo" cols="45" rows="5"></textarea></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" onclick="add();" id="btnSubmit" value="提交" class="ssbtn" /> <input type="button" onclick="Back();" value="返回" class="ssbtn" /> </td> </tr> </tbody> </table> <div class="listmain"> </div> </form></body></html>
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Collections.Generic;using System.Linq;using System.IO;namespace HMFW.Web.Pages.AndroidAPP{ public partial class Event : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void bthUpLoad1_ServerClick(object sender, EventArgs e) { string strPath = UpLoadPic(file1); if (string.IsNullOrEmpty(strPath)) return; Img1.Src = strPath; hidImg1.Value = strPath; } protected void bthUpLoad2_ServerClick(object sender, EventArgs e) { string strPath = UpLoadPic(file2); if (string.IsNullOrEmpty(strPath)) return; Img2.Src = strPath; hidImg2.Value = strPath; } protected string UpLoadPic(HtmlInputFile control) { if (string.IsNullOrEmpty(control.PostedFile.FileName)) return ""; //圖片儲存的檔案夾路徑 string path = Server.MapPath("/upload/Android/"); //每天上傳的圖片一個檔案夾 string folder = DateTime.Now.ToString("yyyyMMdd"); //如果檔案夾不存在，則建立 if (!Directory.Exists(path + folder)) { Directory.CreateDirectory(path + folder); } //上傳圖片的副檔名 string type = control.PostedFile.FileName.Substring(control.PostedFile.FileName.LastIndexOf('.')); //儲存圖片的檔案名稱 string saveName = Guid.NewGuid().ToString() + type; //儲存圖片 control.PostedFile.SaveAs(path + folder + "/" + saveName); return "/upload/Android/" + folder + "/" + saveName; } protected void delPic1_Click(object sender, EventArgs e) { if (File.Exists(Server.MapPath(Img1.Src))) { FileInfo fi = new FileInfo(Server.MapPath(Img1.Src)); fi.Delete(); hidImg1.Value = ""; } } protected void delPic2_Click(object sender, EventArgs e) { if (File.Exists(Server.MapPath(Img2.Src))) { FileInfo fi = new FileInfo(Server.MapPath(Img2.Src)); fi.Delete(); hidImg2.Value = ""; } } }}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EventHandleTempView.aspx.cs" Inherits="HMFW.Web.Pages.AndroidAPP.EventHandleTempView" %><!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></head><body> <form id="form1" runat="server"> <div> </div> </form></body></html>
using HMFW.BLL.SQJS.ZJWG;using HMFW.Model;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;using System.Web;using System.Web.UI;using System.Drawing;using System.Web.UI.WebControls;namespace HMFW.Web.Pages.AndroidAPP{ public partial class EventHandleTempView : System.Web.UI.Page { protected string SpicLength { get { return ViewState["spicLength"] == null ? string.Empty : ViewState["spicLength"].ToString(); } set { ViewState["spicLength"] = value; } } EventBLL ibll = new EventBLL(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string imgid = Request.QueryString["imgid"];//圖片id int id = Convert.ToInt32(Request.QueryString["id"]);//預設第一張圖片 int spicLength = Convert.ToInt32(Request.QueryString["spicLength"]);//指定圖片流的長度 迴圈遍曆顯示指定圖片（多次引用） SpicLength = spicLength.ToString(); SQ_Event sqEventSearch = new SQ_Event(); sqEventSearch.gID = new Guid(imgid); SQ_Event model = ibll.GetModel(sqEventSearch); try { if (model != null && spicLength >= 2) { string base64Decode = model.sPicPath.Split(',')[id]; byte[] bt = Convert.FromBase64String(base64Decode); System.IO.MemoryStream stream = new System.IO.MemoryStream(bt); Bitmap bitmap = new Bitmap(stream); bitmap.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif); } } catch (Exception ex) { throw ex; } Response.End(); } } }}
Base64與Image依據具體業務需求互轉
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
