点击头像上传文件的效果

原理：label里的for和input里的id一样的话，点击label就等于点击input，这样把默认头像的图片放到label里，并把label的for和input（type:file）里的id设置成一样的，再隐藏input，这样点击label里的图片，就等于点击了input上传文件。

代码：

<div class="form-group"><label for="id_avator">头像<img width="60" height="60" id="avatar_img" src="/static/blog/img/default_avatar.jpg"></label><input type="file" name="avator" id="id_avator" class="hidden">
</div>

效果图

转载于:https://www.cnblogs.com/lshedward/p/10382521.html

点击头像上传文件的效果相关推荐

修改form重定到iframe中，模拟异步上传文件的效果
2019独角兽企业重金招聘Python工程师标准>>> <%@ page contentType="text/html; charset=GBK" lang ...
springboot 头像上传文件流保存文件流返回浏览器查看区分操作系统 windows 7 or linux...
1 //我的会员中心头像上传接口 2 /*windows 调试*/ 3 @Value("${appImg.location}") 4 private String winPath ...
antd mobile ImagePicker实现点击头像上传
另类方法处理点击头像进行上传:将设置为绝对定位并且设为透明图层覆盖在显示的头像图片上,点击正常上传 html: const renderAvatar=()=>{if(avatar){return ...
html页面点击按钮上传文件,点击按钮实现文件上传及控制文件上传类型
1.原生js实现文件上传 html部分: 上传文件 js部分: upload(event) { //代替执行上传功能 let it = event.target; $(it).next().click ...
Android WebView嵌入H5之file头像上传文件，适配所有版本
最近公司需要开发新的项目,为了节省时间成本,要求整体嵌入H5界面.对,没看错是整体嵌入,心中一万只草泥马奔腾,没办法大佬就是大佬,还是的照做. 今天来说说h5上传头像的问题吧.网上有很多的解决方案,开 ...
jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
上传文件白名单_十大常见web漏洞——文件上传漏洞
漏洞介绍在我们浏览网页时,文件上传是非常常见的,比如我们会上传头像.附件.视频等文件,文件上传漏洞通常由于网页代码中的文件上传路径变量过滤不严造成的,如果文件上传功能实现代码没有严格限制用户上传的文 ...
java cropper 上传_java web 网站头像上传处理 (springmvc +bootstrap+cropper)
制作头像上传.请根据您的实际需求,修改代码,不完全正确,仅供参考! 前端页面设计使用bootstrap ,头像预览和剪裁工具使用cropper 后台使用springmvc. 现在来看前端的页面设计前 ...
java web 断点上传_使用WebUploader实现分片断点上传文件功能（二）
写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

点击头像上传文件的效果

点击头像上传文件的效果相关推荐

最新文章

热门文章