这篇文章介绍的内容是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(); } }); } });
实际效果如下所示
立即学习“前端免费学习笔记（深入）”；
相关推荐：
文件上传框样式美化
图片上传样式美化
美化上传文件框(上传图片框)
以上就是HTML实现美化上传文件样式 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546012.html
微信扫一扫 
支付宝扫一扫 
