html+css实现自定义图片上传按钮

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
普通的input[type=‘file’]的效果很朴素可以自定义一个file选择文件的按钮:思路为:用定位将自定义的按钮遮住原来的选择文件按钮,再让点击自定义按钮时触发原来的选择文件按钮的事件即可(对此,label可实现)eg:html:css样式:结果图:点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!以上,是用bo...

自定义上传图片按钮


普通的input[type=‘file’]的效果很朴素

普通的file效果


可以自定义一个file选择文件的按钮:

思路为:
定位将自定义的按钮遮住原来的选择文件按钮,
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
(对此,label可实现)

eg:
html:

自定义选择文件按钮替换原按钮布局


css样式:

自定义选择文件按钮CSS样式布局


结果图:

自定义选择图片按钮

点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!

以上,是用bootstrap实现的,原生的如下:

html:

原生自定义文件上传按钮html


CSS:

原生自定义文件上传按钮CSS

效果图:

原生自定义文件上传按钮的效果图


点一下,就可以弹出选择文件的文件夹啦!

你可能在找的问题:

HTML5教程

html5-FileReader实现上传图片实时预览

普通的文件上传只能看到它的文件名,而如果要实现选择某一张图片则可以利用html5的FileReader完成下面是实现步骤:html:这里是上传图片的内容,onchange="getFile()"为选择文件后的转换函数,后面会提及上传图片的按钮我这里是自定义的,做法在另一篇...

HTML5教程

html+css实现自定义图片上传按钮

普通的input[type=‘file’]的效果很朴素可以自定义一个file选择文件的按钮:思路为:用定位将自定义的按钮遮住原来的选择文件按钮,再让点击自定义按钮时触发原来的选择文件按钮的事件即可(对此,label可实现)eg:html:css样式:结果图:点击“选择图片”按...

HTML5教程

详解android与HTML混合开发总结

现在很多的 APP中会嵌套HTML5的页面,这篇文章主要介绍了详解android与HTML混合开发总结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML5教程

Html5应用程序缓存(Cache manifest)

这篇文章主要介绍了Html5应用程序缓存(Cache manifest)的相关资料,可以优化加载速度,节约服务器资源。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML5教程

Html5之title吸顶功能

吸顶是一种比较常见的交互效果,当页面滑出屏幕边界,标题会自动吸附在屏幕边缘,用于提示用户,这篇文章主要介绍了Html5之title吸顶功能的相关资料,感兴趣的小伙伴们可以参考一下

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部