小编给大家分享一下HTML实现美化上传文件样式的案例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
计算
安全
数据库
网络和加速
企业服务
<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>效果如下图所示 
这个样式调整了很长时间，最后结果都不尽人意。
<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触发点击那个用于上传文件的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();
}
});
}
});实际效果如下所示
以上是HTML实现美化上传文件样式的案例的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
