這篇文章介紹的內(nèi)容是HTML實(shí)現(xiàn)美化上傳文件i樣式 ，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

傳統(tǒng)寫法

上傳文件

效果如下圖所示

這個樣式調(diào)整了很長時間，最后結(jié)果都不盡人意。

非常規(guī)寫法

上傳文件

上傳

給真正的用于上傳文件的Input style='display:none;'隱藏起來，然后用一個很容易控制樣式的button或者p盒子等代替。當(dāng)點(diǎn)擊button的時候，同時用js觸發(fā)點(diǎn)擊那個用于上傳文件的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("導(dǎo)入成功");

window.location.reload();

}

});

}

});

實(shí)際效果如下所示

相關(guān)推薦：

總結(jié)

以上是生活随笔為你收集整理的php文件上传前端页面样式,HTML实现美化上传文件样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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