介绍 & lt;形式id=皍pform"enctype=& # 39;多部分/格式# 39;比;
类& lt; p=癴orm-group"祝辞
& lt;标签=皍pteainput"祝辞上传文件& lt;/label>
& lt;输入id=皍pteainput"name=皍pfile"类型=癴ile"类=癴orm-control-file"比;
& lt;/p> & lt;/form> & lt;形式id=皍pform"enctype=& # 39;多部分/格式# 39;风格=跋允?没有,“比;
类& lt; p=癴orm-group"祝辞
& lt;标签=皍pteainput"祝辞上传文件& lt;/label>
& lt;输入id=皍pteainput"name=皍pfile"类型=癴ile"类=癴orm-control-file"比;
& lt;/p> & lt;/form> & lt;按钮id=皍ptea"类型=癰utton"类=癰tn btn-primary"祝辞上传& lt;/button> 美元(“# uptea")。点击(函数(){
$ (“# upteainput") .click ();
});//下面是ajax上传文件的代码,此处就不做过多讲解。(“# upteainput")美元。改变(函数(){//如果上传文件的输入内容发生了变化
val=美元(“# upteainput") .val ();if ($ val !=& # 39; & # 39;){//要上传的文件名不为空
(数据=new FormData美元(“# upform")[0]);//创建一个FormData对象
主机美元=window.location.host;
. ajax({美元
url:“http://"+ $主机+“/home/前面/up-tea"
类型:“POST",
数据:元数据,
processData:假的,
contentType:假的,
数据类型:“json"
错误:函数(){
警报(& # 39;错误加载XML文档# 39;);
},
成功:函数(数据、状态){//如果调用php成功
如果(数据)。errno !=0){如果(数据)。errmsg !=& # 39; & # 39;) {
警报(data.errmsg);
其他}{
alert(“系统错误“);
}
}
console.log(数据);
alert(“导入成功“);
window.location.reload ();
}
});
}
});
小编给大家分享一下HTML实现美化上传文件样式的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
传统写法
效果如下图所示
这个样式调整了很长时间,最后结果都不尽人意。
非常规写法
给真正的用于上传文件的输入<代码>风格=& # 39;显示:没有;& # 39;隐藏起来,然后用一个很容易控制样式的按钮或者p盒子等代替。当点击键的时候,同时用js触发点击那个用于上传文件的输入即可。
实际效果如下所示
以上是HTML实现美化上传文件样式的案例的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
