您现在的位置是：网站首页> 编程资料编程资料

Amaze UI 文件选择域的示例代码amazeui 验证按钮扩展的实现前后端结合实现amazeUI分页效果AmazeUI 加载进度条的实现示例AmazeUI折叠式卡片布局，整合内容列表、表格组件实现amaze ui 的使用详细教程AmazeUI中模态框的实现

2023-10-11 368人已围观

简介这篇文章主要介绍了Amaze UI 文件选择域的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

文件选择域

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


 选择要上传的文件

效果如下

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

于是我做了一个小小的修改：加入一段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]) }); } });

上传文件后

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

那就再加一段小代码：

 $('input[type="file"]').closest('div').hover(function(){ if($(this).find('input[type="file"]').attr('src')){ $('body').append('
') } },function(){ $('.imgView').remove(); });

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

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

总结

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

上一篇：h5封装下拉刷新

下一篇：HTML5 SEO优化的一些建议HTML5 SEO优化的一些建议html5 input输入实时检测以及延时优化HTML5探秘：用requestAnimationFrame优化Web动画html5自带表单验证体验优化及提示气泡修改功能以淘宝前端为例剖析HTML5与移动端页面的性能优化一张图看懂移动HTML5前端性能优化浅谈利用缓存来优化HTML5 Canvas程序的性能使用分层画布来优化HTML5渲染的教程html5摇一摇代码优化包括DeviceMotionEvent等等

您现在的位置是：网站首页> 编程资料编程资料

Amaze UI 文件选择域的示例代码amazeui 验证按钮扩展的实现前后端结合实现amazeUI分页效果AmazeUI 加载进度条的实现示例AmazeUI折叠式卡片布局，整合内容列表、表格组件实现amaze ui 的使用详细教程AmazeUI中模态框的实现

相关内容

点击排行

本栏推荐

猜你喜欢