快捷導(dǎo)航

Image顯示服務(wù)器上任意絕對路徑下的圖片(采用二進(jìn)制流實(shí)現(xiàn))

更新時(shí)間：2013年02月16日 08:50:45 作者：

有這樣一個需求:數(shù)據(jù)庫中存儲的是照片所在的絕對路徑（可以不在系統(tǒng)所在路徑下），Image控件動態(tài)加載路徑下的圖片,另類實(shí)現(xiàn)方法，感興趣的朋友可以參考下，或許本文對你學(xué)習(xí)二進(jìn)制流有所幫助

我要實(shí)現(xiàn)這樣一個需求：數(shù)據(jù)庫中存儲的是照片所在的絕對路徑（可以不在系統(tǒng)所在路徑下），Image控件動態(tài)加載路徑下的圖片。

看到這個題目，有些人會說，這還不簡單啊，將URL直接設(shè)置成絕對路徑不就行了啊。我只能說，如果你這樣說，那么只能說明你沒有經(jīng)過思考，甚至于，還沒有搞清楚Web開發(fā)中前臺代碼和后臺代碼到底是什么意思，但是這種做法，在自己做的時(shí)候（未架到IIS），搜狗瀏覽器是可以顯示圖片的（僅此一款可以顯示，所以這種做法沒有意義）。

Image控件是在System.Web.UI.WebControls命名控件中，所以不能像在winform中那樣通過byte[]直接顯示圖片（個人也有點(diǎn)不太明白這句話，誰如果明白可以解釋一下）。找到的這種方法，是采取將圖片讀取，然后將讀進(jìn)來的二進(jìn)制流寫到一個頁面上，然后將Image的URL設(shè)置為此頁面。下面是我的Demo實(shí)現(xiàn)代碼。
前臺代碼：

復(fù)制代碼代碼如下:

 
<head runat="server"> 
<title></title> 
<script src="jquery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function ShowP(obj) { 
$("#Image1")[0].src = "ShowPic.aspx?URL=" + obj.id; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="E:\\1.jpg" type="button" value="button" onclick="ShowP(this);" /> 
<asp:Image ID="Image1" runat="server" /> 
</div> 
</form> 
</body> 
</html> 

ShowPic.aspx的前臺代碼為空，下面是ShowPic.aspx的后臺代碼：

復(fù)制代碼代碼如下:

 
public partial class ShowPic : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
#region "根據(jù)照片路徑，將照片轉(zhuǎn)為二進(jìn)制數(shù)組" 
string strUrl = Request.QueryString["URL"]; 
// 以二進(jìn)制方式讀文件 
FileStream aFile = new FileStream(strUrl, FileMode.OpenOrCreate, FileAccess.ReadWrite); 
// 創(chuàng)建一個二進(jìn)制數(shù)據(jù)流讀入器，和打開的文件關(guān)聯(lián) 
BinaryReader brMyfile = new BinaryReader(aFile); 
// 把文件指針重新定位到文件的開始 
brMyfile.BaseStream.Seek(0, SeekOrigin.Begin); 
//獲取照片的字節(jié)數(shù)組 
byte[] photo = brMyfile.ReadBytes(Convert.ToInt32(aFile.Length.ToString())); 
// 關(guān)閉以上new的各個對象 
brMyfile.Close(); 
#endregion 
Response.BinaryWrite(photo); 
} 
} 

在上面我把照片的路徑賦給了按鈕ID，然后將路徑作為參數(shù)來調(diào)用ShowPic.aspx，在ShowPic的后臺代碼中，將照片以二維數(shù)組的形式寫到頁面上，如果你直接打開這個頁面，會顯示亂碼。

然后將Image的Url設(shè)置為這個頁面，此時(shí)會顯示圖片。我通過按鈕ID實(shí)現(xiàn)了一下動態(tài)加載圖片，到具體應(yīng)用，還有一點(diǎn)點(diǎn)傳參的小問題，關(guān)于JavaScript傳參，這個還是需要大家自己做個例子，通過javascript調(diào)試工具，來了解dom結(jié)構(gòu)，然后進(jìn)行操作。