表單中的input type=”file”在前端開(kāi)發(fā)中經(jīng)常會(huì)用到，但是很悲劇的是input type=”file”在各個(gè)瀏覽器下表現(xiàn)不統(tǒng)一，樣式很難起作用；

通常我的設(shè)計(jì)師是非常愛(ài)美的，如果真的要還原設(shè)計(jì)稿，只能通過(guò)文本框和按鈕去模擬一個(gè)input type=”file”。

HTML代碼如下：

<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>

這是一個(gè)基本的input type=”file”。當(dāng)然這里你可能沒(méi)看到文本框和按鈕的代碼，我們可以在后面的js中將文本框和按鈕追加到html中。

注意：size=”28″是在firefox下input type=”file”的寬高是不能通過(guò)樣式來(lái)定義的，所以用了size屬性來(lái)控制input type=”file”的寬度

CSS代碼如下：

.type-file-box {
??? position:relative;
??? width:260px
}
input {
??? vertical-align:middle;
??? margin:0;
??? padding:0
}
.type-file-text {
??? height:22px;
??? border:1px solid #cdcdcd;
??? width:180px;
}
.type-file-button {
??? background-color:#FFF;
??? border:1px solid #CDCDCD;
??? height:24px;
??? width:70px;
}
.type-file-file {
??? position:absolute;
??? top:0;
??? right:0;
??? height:24px;
filter:alpha(opacity:0);
??? opacity: 0;
??? width:260px
}

? 注意：這里的filter:alpha(opacity:0);opacity: 0是讓input type=”file”全透明，這樣用戶看不到input type=”file”。層級(jí)在文本框和按鈕之上。這樣用戶在點(diǎn)擊按鈕的時(shí)侯實(shí)際上點(diǎn)擊的input type=”file”； js代碼： $(function () {
??? var textButton = "<input type='text' name='textfield' id='textfield' class='type-file-text' /> &nbsp;<input type='submit' name='button' id='button' value='瀏覽...' class='type-file-button' />"
??? $(textButton).insertBefore("#fileField")；
??? $("#fileField").change(function () {
??????? $("#textfield").val($("#fileField").val()););); 這里用了jq當(dāng)input type=”file”得值onchange的的時(shí)侯將文本框的值設(shè)置成input type=”file”的值，OK了 demo演示：http://www.css88.com/demo/input-file/

聲明: 本文采用 BY-NC-SA 協(xié)議進(jìn)行授權(quán) | WEB前端開(kāi)發(fā)
轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自《模擬input type=file》

?

總結(jié)

以上是生活随笔為你收集整理的模拟input type=file的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。