ASP.Net 對上傳組件美化 (2010-11-27 16:47:38)轉載▼ 標簽： it 客戶端 文本框 控件 絕對路徑 美化 uploadfile 上傳控件 分類： 程序
新浪會自動對getElementById加_X請自行查詢這個函數
貌似網易是正常的跳轉
ASP.NET 的上傳組件在客戶端顯示為
<input type="file" id="fp" " />
在一個很美觀的頁面中出現file很不協調，
尤其是input type="file"的 按鈕無法被css美化
先從客戶端著手，
用一個文本框和一個按鈕代替input type="file" ，
然后將<input type="file" style="display:none;" />隱藏。
這樣button就可以被css 處理了。
當點擊按鈕時用javascript激活 file組件的click
<script language="javascript">
function xx() {
document.getElementByIdx_x("fp").click();
document.getElementByIdx_x("fpurl").value=document.getElementByIdx_x("fp").value;
}
</script>
<input type="text" id="fpurl" style="width:300px;" /> <input onClick="xx();" type="button" value="文本框和輸入框都可以自定義樣式" style='width:300px; border:1px solid #000; background:gray;color:#fff;font-weight:bold;font-size:13px;'>
<input type="file" id="fp" style="display:none;" />
這樣客戶端實現了美化FileUplad的控件
將這段代碼轉換成ASP.NET 可以使用的方式
<input id="txtUploadFile" style="border: 1px solid #C0C0C0;width:300px" />
<input type="button" value="瀏覽.." onClick="document.getElementByIdx_x('<%=FileUpload1.ClientID %>').click();" style="border-style: hidden; border-width: 0px; background-position: 0px 0px; background-image: url('images/button_2.jpg'); background-repeat: no-repeat; width: 52px; height: 23px;" />
<asp:FileUpload ID="FileUpload1" runat="server" />
<input id="fpurl" type="hidden" value=<%=FileUpload1.ClientID %> />
因為ASP.NET的程序ID到了客戶端會被改變，所以用隱藏字段來存儲FileUpload的客戶端ID.
JS也相應改變.
function UploadOnpropertychange() {
//JS獲取上傳控件的值，即所上傳文件的絕對路徑<%=FileUpload1.ClientID %>
var varUploadFile = document.getElementByIdx_x_x(document.getElementByIdx_x("fpurl").value).value;
//將路徑值通過split函數切割分成一個數組集合
//使用這個函數，這個地方主要是為了獲取文件名
var varArray = varUploadFile.split('\\');
//最后將所需要的文件名賦給文本框 document.getElementByIdx_x("txtUploadFile").value = varArray[varArray.length - 1];
}
最后在cs文件中加上
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
//先將控件隱藏
this.FileUpload1.Attributes.Add("style", "display:none");
//監視屬性變化，此時主要用于捕捉文件路徑的寫入值
this.FileUpload1.Attributes.Add("onpropertychange", "UploadOnpropertychange()");
}
這樣就可以在ASP.NET 使用 CSS處理 FileUpload組件了。
2007-04-27 16:39 by 迷路中的路人甲, 365 閱讀, 評論, 收藏, 編輯還有一個問題就是，如何利用這一個控件，進行多個文檔的上傳工作？
利用dom操作，當每次選擇了一個文件的時候，隱藏該file域，在相同位置創建一個新的供下次點擊，刪除的時候只要直接刪掉隱藏的就行了[初步想法未經證實]
一直以來上傳控件input file都無法進行美化，例如換個圖片什么的；查了很多資料最終就是需要利用隱藏file域實現上傳功能；其實很簡單，從163里面找了一個樣式出來，搞定；
js代碼： //依賴prototype.js
function selfile()
{
$("fileurl").value = $("file").value;
}
css代碼：//來自mail.163.com
a.addfile{width:70px;height:20px;position:relative;cursor:hand;top:4px;top/**/:0;text-decoration:none;background-position:-823px -17px;display:inline;float:left;margin-top:-5px;margin-top/**/:-1px}
*:lang(zh) a.addfile{margin-top:-2px;cursor:pointer}
a.addfile:hover{background-position:-911px -17px;text-decoration:none}
input.addfile{width:1px;height:18px;cursor:pointer!important;cursor:hand;position:absolute;top:5px;left:-5px;left/**/:-3px;opacity:0;filter:alpha(opacity=0)}
*:lang(zh) input.addfile{left:-18px}
html代碼：//
<input type="text" value="" id="fileurl" name="fileurl" readonly/>
<a href="#" class="addfile"> <input type="file" name="file" id="file" hideFocus class="addfile" onChange="selfile();"/>+添加附件(也可以放個美化的圖片) </a>