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闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
CSS极坐标的实例代码
Jun 03 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 判断常量,变量和函数是否存在
2009/04/26 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
提交表单时执行func方法实现代码
2013/03/17 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python with的用法
2014/08/22 Python
python中dir函数用法分析
2015/04/17 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python多进程fork()函数详解
2019/02/22 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python入门之基础语法学习笔记
2020/02/08 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
行政人事岗位职责
2014/03/17 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
投标售后服务承诺书
2015/04/29 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers