|
三、Html和css代碼
html代碼
html結(jié)構(gòu)很簡單，我們?yōu)閷⑵浞胖玫揭粋�class屬性為“fileWrap”的div即可，盡管通過js生成了一些html代碼，但是，到目前為止，我們只需要簡單的這樣做就行，即：
< class=”fileWrap”>
< type=”file” name=”photo” />
</div>
css代碼
設(shè)置.fileWrap的屬性，他只是一個容器，主要用來容納“上傳圖片”按鈕<button type=”button”>上傳圖片<button>，錯誤提示消息<p class=”mes”></p>以及圖片顯示的區(qū)域<div class=”imgWrap”><img src=”” /></div>。最后生成的完整代碼如下：
<div class="fileWrap">;
<div class="imgWrap">;
<img src="/lib/img/defImage.gif"/>;
</div>;
<div class="fakefile">;
<button type="button">;瀏覽圖片</button>;
<p class="mes"/>;
<input type="file" class="file fakeCn" name="photo" id="file_0"/>;
</div>;
</div>
我們對照生成的代碼，定義相關(guān)的css屬性；
定義fileWrap需要注意的，需要給其添加overflow:hidden屬性，以確保文本上傳控件不會超出點(diǎn)擊區(qū)域，因?yàn)槲谋旧蟼骺丶墙柚ㄎ皇蛊涓采w在“點(diǎn)擊按鈕”之上的，另外給其定義一個合適的寬度，fileWrap的css屬性如下：
div.fileWrap{
overflow:hidden;
width:110px;
}
放置圖片的容器imgWrap,為確保圖片能居中顯示，只需定義text-align:center;即可。
div.imgWrap{
text-align:center;
}
我們將文件上傳控件放到class屬性為fakefile的div中，這樣是為了方便定位，設(shè)置其定位屬性為position：relative。需要注意的是，我們要定義padding-top屬性，這是因?yàn)殄e誤信息位于按鈕的下方，而該按鈕是被絕對定位的，如果不定義padding-top屬性，錯誤信息將被按鈕覆蓋。Padding-top的值略高于按鈕的高度，代碼如下：
div.fakefile{
padding-top:25px;
position:relative;
}
對于“上傳圖片”按鈕和錯誤信息，其css代碼如下：
div.fakefile button{
left:10px;
position:absolute;
top:3px;/*確保按鈕與圖片之間不會靠的太近*/
z-index:1;
}
div.fakefile .mes{
padding:0 3px;
text-align:left;
}
對于文本上傳控件，設(shè)置透明度為0，并定義left值，是其便宜，確保點(diǎn)擊區(qū)域位于“上傳圖片”的上方，代碼如下：
div.fakefile input{
left:-135px;/*大約為輸入框的寬度*/
opacity:0;
filter:alpha(opacity:0);
-moz-opacity:0;
z-index:2;/*確�？丶挥诎粹o上方*/
}
出處：
責(zé)任編輯：bluehearts
上一頁 使用jQuery改進(jìn)文件上傳控件 [1] 下一頁 使用jQuery改進(jìn)文件上傳控件 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 使用jQuery改進(jìn)文件上傳控件 [2]
