介绍 & lt; div 类=癮m-form-group am-form-file"比;
& lt;才能button 类型=癰utton",类=癮m-btn am-btn-default am-btn-sm"比;
,,,& lt;小姐:类=癮m-icon-cloud-upload"祝辞& lt;/i>,选择要上传的文件& lt;/button>
& lt;才能input 类型=癴ile", multiple>
& lt;/div>
,
& lt;人力资源/比;
,
& lt; div 类=癮m-form-group am-form-file"比;
& lt;才能小姐:类=癮m-icon-cloud-upload"祝辞& lt;/i>,选择要上传的文件
& lt;才能input 类型=癴ile", multiple>
& lt;/div> 美元(& # 39;输入(type=癴ile") & # 39;) .change (function (事件),{
,,,var that =,;
,,,var file =,()美元[0].files [0];
,,,如果(文件){
,,,,,,,()美元.prev ()。text (that.files [0] . name);
,,,,,,,()美元.attr ({, & # 39; src # 39;:, window.URL.createObjectURL (that.files [0]),});
,,,}
}); 美元(& # 39;输入(type=癴ile") & # 39;) .closest (& # 39; div # 39;) .hover(函数(){
,,,如果美元(这);(& # 39;输入(type=癴ile") & # 39;) .attr (& # 39; src # 39;)) {
,,,,,,,美元(& # 39;身体# 39;).append (& # 39; & lt; div 类=癷mgView",风格=翱矶?,& # 39;+美元(这);(& # 39;按钮# 39;). css(& # 39;宽度# 39;)+ & # 39;;:,& # 39;+($(这);(& # 39;按钮# 39;).offset直()上- 210)+ & # 39;px;左:,& # 39;+美元(这);(& # 39;按钮# 39;).offset () .left + & # 39; px;高度:,200 px;位置:,绝对的,text-align:,中心;行高:,200 px; z - index:, 99999; background:, rgba(51岁,51岁,51岁,0.6);“祝辞& lt; img 风格=癿ax-width:, 90%; max-height:, 90%;“, src=https://www.yisu.com/zixun/? +美元(这);(“输入(type="文件")”).attr (src) + ' ">
”)
}
},函数(){
$ (' .imgView ') .remove ();
}); 本篇文章给大家分享的是有关使用让UI怎么实现一个文件选择域,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强>文件选择域
<代码> & lt;输入类型=癴ile"在,也是CSS啃不动的一块骨头,如果实在看不惯原生的样式,一般的做法是把文件选择域设为透明那个,覆盖在其他元素。
效果如下
但是官方给的方案一个问题在于,上传文件之后图标没有改变,也没有显示上传文件名的地方。
于是我做了一个小小的修改:加入一段js代码
上传文件后
进一步的,如果传的是图片,我想预览上传的图片效果图呢。
那就再加一段小代码:
以上就是使用让UI怎么实现一个文件选择域,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
