Amaze UI 文件选择域的示例代码


Posted in HTML / CSS onAugust 26, 2020

文件选择域

<input type="file"> 也是 CSS 啃不动的一块骨头,如果实在看不惯原生的样式,一般的做法是把文件选择域设为透明那个,覆盖在其他元素。

<div class="am-form-group am-form-file">
  <button type="button" class="am-btn am-btn-default am-btn-sm">
    <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
  <input type="file" multiple>
</div>
 
<hr/>
 
<div class="am-form-group am-form-file">
  <i class="am-icon-cloud-upload"></i> 选择要上传的文件
  <input type="file" multiple>
</div>

效果如下

Amaze UI 文件选择域的示例代码

但是官方给的方案一个问题在于,上传文件之后图标没有改变,也没有显示上传文件名的地方。

于是我做了一个小小的修改:加入一段js代码

$('input[type="file"]').change(function (event) {
    var that = this;
    var file = $(that)[0].files[0];
    if(file){
        $(that).prev().text(that.files[0].name);
        $(that).attr({ 'src': window.URL.createObjectURL(that.files[0]) });
    }
});

上传文件后

Amaze UI 文件选择域的示例代码

进一步的,如果传的是图片,我想预览上传的图片效果图呢。

那就再加一段小代码:

$('input[type="file"]').closest('div').hover(function(){
    if($(this).find('input[type="file"]').attr('src')){
        $('body').append('<div class="imgView" style="width: '+$(this).find('button').css('width')+';top: '+($(this).find('button').offset().top-210)+'px;left: '+$(this).find('button').offset().left+'px;height: 200px;position: absolute;text-align: center;line-height: 200px;z-index: 99999;background-color: rgba(51, 51, 51,0.6);"><img style="max-width: 90%;max-height: 90%;" src="'+$(this).find('input[type="file"]').attr('src')+'"></div>')         
    }
},function(){
    $('.imgView').remove();
});

Amaze UI 文件选择域的示例代码

当鼠标放上面就会自动显示上传图片的缩略图了。

转载于:https://my.oschina.net/u/3463305/blog/1504565

总结

到此这篇关于Amaze UI 文件选择域的示例代码的文章就介绍到这了,更多相关Amaze UI 文件选择域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 #HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 #HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
You might like
表格展示无限级分类(PHP版)
2012/08/21 PHP
php实现httpRequest的方法
2015/03/13 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python实现时间序列可视化的方法
2019/08/06 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
NumPy排序的实现
2020/01/21 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
网络维护管理员的自我评价分享
2013/11/11 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
办公室人员先进事迹
2014/01/27 职场文书
2014教师研修学习体会
2014/07/08 职场文书
车贷收入证明范本
2014/09/14 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
现实表现证明材料
2015/06/19 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript