HTML完成美化上傳文件樣式
發(fā)表時間:2023-09-12 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:9
[摘要]這篇文章介紹的內(nèi)容是HTML實現(xiàn)美化上傳文件i樣式 ,有著一定的參考價值,現(xiàn)在分享給大家,有需要的朋友可以參考一下傳統(tǒng)寫法<form id="upform" enctype=multipart/form-data><p class="form-gro...
這篇文章介紹的內(nèi)容是HTML實現(xiàn)美化上傳文件i樣式 ,有著一定的參考價值,現(xiàn)在分享給大家,有需要的朋友可以參考一下
傳統(tǒng)寫法
<form id="upform" enctype='multipart/form-data'>
<p class="form-group">
<label for="upteainput">上傳文件</label>
<input id="upteainput" name="upfile" type="file" class="form-control-file">
</p></form>
效果如下圖所示

這個樣式調(diào)整了很長時間,最后結(jié)果都不盡人意。
非常規(guī)寫法
<form id="upform" enctype='multipart/form-data' style="display:none;">
<p class="form-group">
<label for="upteainput">上傳文件</label>
<input id="upteainput" name="upfile" type="file" class="form-control-file">
</p></form><button id="uptea" type="button" class="btn btn-primary">上傳</button>
給真正的用于上傳文件的Input style='display:none;'
隱藏起來,然后用一個很容易控制樣式的button或者p盒子等代替。當點擊button的時候,同時用js觸發(fā)點擊那個用于上傳文件的input即可。
$("#uptea").click(function () {
$("#upteainput").click();
});//下面是ajax上傳文件的代碼,此處就不做過多講解。 $("#upteainput").change(function () {//如果上傳文件的input內(nèi)容發(fā)生了變化
$val = $("#upteainput").val(); if ($val != '') {//要上傳的文件名不為空
$data = new FormData($("#upform")[0]);//創(chuàng)建一個formdata對象
$host = window.location.host;
$.ajax({
url: "http://" + $host + "/home/front/up-tea",
type: "POST",
data: $data,
processData: false,
contentType: false,
dataType: "json",
error: function () {
alert('Error loading XML document');
},
success: function (data, status) {//如果調(diào)用php成功
if (data.errno != 0) { if (data.errmsg != '') {
alert(data.errmsg);
} else {
alert("系統(tǒng)錯誤");
}
}
console.log(data);
alert("導入成功");
window.location.reload();
}
});
}
});
實際效果如下所示

相關(guān)推薦:
文件上傳框樣式美化
圖片上傳樣式美化
美化上傳文件框(上傳圖片框)
以上就是HTML實現(xiàn)美化上傳文件樣式 的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設是一個廣義的術(shù)語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。