給FileUpload按鈕添加背景圖片

 給FileUpload添加背景圖片,其實不是直接添加。雖然可以設置FileUpload的CSS樣式。但卻無法做到設置上傳控件的那個按鈕(比如給這個上傳按鈕添加圖片)。VS並沒有提供現成的屬性。所以想想是否可以考慮模擬一個類似上傳的控件。答案是肯定的。

我在網上找了好多。有人說自己弄一個按鈕+文本框來實現上傳的功能,而按鈕是可以添加圖片背景的。當然我相信這個應該是可以實現的。但是是不是很麻煩呢?

我在網上發現一個很不錯的方法,現在爲我所用。並且成功的實現了。所以接下來我就談談如何去實現。

原理:

利用CSS。讓真正的“上傳”控件透明,讓<img/>顯示。而<img/>來顯示要顯示的圖片。這兩個控件重疊(圖片在下,真正的“上傳”控件在上),單擊圖片時實際上是單擊了"上傳"控件。讓“上傳”控件通過js事件來傳遞文件路徑給新建的文本框,來模擬"上傳"控件的文本框。(我覺得這真的是一種巧妙的方法,因爲並沒有拋棄真正的上傳控件來使自己做一個擁有上傳功能的組合控件)

如果還是不懂,那就直接看實例吧。看完實例後再看原理就OK了。

代碼如下:

<table>
<tr>
<td>
<input readonly="readonly" id="path" style="width:200px"/> //模擬上傳控件的文本框
</td>
<td>
<div style="position: absolute; z-index: 2; cursor:hand;">
<input id="FileUpload" type="file" style="filter: alpha(opacity=0);width: 20px; height:auto; cursor: hand;" οnchange="path.value=this.value"
runat="server" /> //通過onchange事件來修改模擬文本框的值。runat="server"這樣後臺也能識別該控件了
</div>
<div style="position: absolute; z-index: 1; cursor: hand;">
<img src="../images/inputUpload.jpg" style="cursor: hand;" /> //自定義背景圖片
</div>
</td>
<td>
<div>
<asp:Button ID="upload" runat="server" Text="上傳" οnclick="upload_Click" />
</div>
</td>
</tr>
</table>

實現的效果如下圖:


怎麼樣?很傳神吧,其實看到的"瀏覽..."按鈕就是<img/>添加的背景圖片。 而真正的“上傳”控件已經隱藏了(透明),但在<img/>的上方。

控件之間具體的樣式自己就可以在style裏面調試了。

說明:

上面的上傳控件用的是html控件,雖然<asp:FileUpload/>同樣可以,但是無法很好的實現onchange事件(可能會有方法,但是又會涉及到其它的難點,有興趣的可以研究下)那樣就不能模擬上傳控件的文本框了。當然,如果不需要模擬那個文本框,大可以用<asp:FileUpload/>這個控件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章