首頁 > 開發者 > ASP

使用透明疊加法美化檔案上傳介面 (http://www.script8.com/bbs/thread.asp?tid=6)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
使用透明疊加法美化檔案上傳介面 
我要回複
【幻宇】於06-11-28 09:58 發布     估計很多人都對檔案域那難看的樣式無可奈何，對於一個講究完美的web系統來說，這種介面是無法接受的。gmail的附件添加在IE瀏覽器中實現了樣式自訂，讓大夥興奮了好一這，他使用的是檔案域的click()方法，但用戶端的安全限制非常苛刻，必須結合iframe才能實現，代碼比較繁鎖。我使用的是透明疊加法，即把檔案域置於點擊目標之上，並讓其透明，這樣使用者看到的是自訂熱區，點擊的依然是瀏覽按鈕，沒有違反任何安全機制。同樣地，這種方法也支援firefox。

◇ 測試程式 - >> 運行下面的js
<style>
*{font-size:12px;cursor:default}
.hand{cursor:hand;cursor:pointer}
</style>
<body>
<form name=fm1>
<div id=bxAttList>
    <div id=bxAtt onmouseover="$('bxAtt1').style.textDecoration='underline'" onmouseout="$('bxAtt1').style.textDecoration=''" style=float:left;width:60>
        <span id=bxAtt1 style='position:absolute;padding-top:3;cursor:hand;font-family:宋體'>@添加附件</span>
        <span id=bxAtt2 onmouseover=this.scrollLeft=100 style=position:absolute;width:60;overflow:hidden;filter:alpha(opacity=0);-moz-opacity:0></span>
    </div>
</div>
</form>
</body>
<script>
file_create()
function file_create(){
    $("bxAtt2").innerHTML="<input onchange=file_change(this) hidefocus type=file name=file1 size=1 class=hand>"
}
function file_change(tx){
    var sName,o
    sName=tx.value.replace(/\\/g,"/").replace(/(.*\/)(.*)/,"$2")
    o=document.createElement("nobr")
    o.style.cssText="float:left;margin-right:6;padding-top:3;color:darkgreen"
    o.innerHTML="□"+sName+"<font onclick=$('bxAttList').removeChild(this.parentNode);file_repos() class=hand style=color:red;font-weight:bold>"+unescape("×")+"</font>"
    tx.style.display="none"
    o.appendChild(tx)
    $("bxAttList").insertBefore(o,$("bxAtt"))
    file_repos()
    file_create()
}
function file_repos(){
    $("bxAttList").appendChild($("bxAtt"))
}
function $(obj){
    return typeof(obj)=="object"?obj:document.getElementById(obj)
}
</script>

實事求是，從頭開始

【dev7】於06-12-20 20:05 回複

的確漂亮

頂一個

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More