這篇文章介紹的內容是HTML實現美化上傳文件i樣式 ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
傳統寫法
上傳文件
效果如下圖所示
這個樣式調整了很長時間，最后結果都不盡人意。
非常規寫法
上傳文件
上傳給真正的用于上傳文件的Input style='display:none;'隱藏起來，然后用一個很容易控制樣式的button或者p盒子等代替。當點擊button的時候，同時用js觸發點擊那個用于上傳文件的input即可。$("#uptea").click(function () {
$("#upteainput").click();
});//下面是ajax上傳文件的代碼，此處就不做過多講解。 $("#upteainput").change(function () {//如果上傳文件的input內容發生了變化
$val = $("#upteainput").val(); if ($val != '') {//要上傳的文件名不為空
$data = new FormData($("#upform")[0]);//創建一個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) {//如果調用php成功
if (data.errno != 0) { if (data.errmsg != '') {
alert(data.errmsg);
} else {
alert("系統錯誤");
}
}
console.log(data);
alert("導入成功");
window.location.reload();
}
});
}
});
實際效果如下所示
相關推薦：
