实现点击图片上传,再次点击重选图片的功能
HTML部分
<form method="post" enctype="multipart/form-data" class="sigma_btn light ml-4">
<div class="button">
选择文件
<input type="file" size="30" name="photo"accept="image/png,image/gif,image/jpg" class="file" />
</div>
<input type="submit" value="XXXX" class="button-new subbtn" style="margin-top:15px;" />
</form>
使用input标签,并使type=file,可用于图片的上传
CSS部分
.submit>form {
display: flex;
flex-direction: column;
}
.file {
flex: 1;
}
.subbtn {
flex: 1;
}
.button {
background-color: #00acb1;
color: #fff;
padding: .5rem;
box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
position: relative;
border-radius: 15px;
}
.button>span {
display: inline-block;
margin-left: .625rem;
width: 1.25rem;
height: 1rem;
}
.button>input {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
/*透明度为零。隐藏input的默认样式*/
}
实现思路:
1. div标签包裹input元素
2. 设置div标签为上传按钮的样式,相对定位
3. 设置input为透明,绝对定位,覆盖上面的div
效果:看到的按钮是div的样式,点击时实际是点击input元素。样式和功能具备
JS部分
var btnbox = $(".button");
btnbox.on("click", function () {
var flag = $(this).is('.button1')
console.log(flag)
if (flag) {
var inpHtml = '选择文件' +
'<input type="file" size="30" name="photo"accept="image/png,image/gif,image/jpg" class="file" />'
btnbox.html(inpHtml)
btnbox.removeClass('button1')
} else {
$('.button').on("change", function () {
console.log(this)
var path = $("input:file").val();
var name = $('input:file').attr("name"); //获取name值
var ps = path.split("\\");
var filename = ps[ps.length - 1] +
'<span><img src="assets/image/叉号.png" alt=""></span>';
btnbox.html(filename);
btnbox.addClass('button1')
})
}
})
思路:
1.给外壳class=button,绑定点击事件
2.判断div里是否含有class=button1
- 如果含有,表示此时的div里面为:
<div class="button button1">
图片.png
<span>
<img src = "叉号.png" />
</span>
</div>
状态如图
- 如果没有,表示此时的div里为:
<div class="button">
选择文件
<input type="file" size="30",name="photo",accept="image/png,image/gif,image/jpg"class="fille>
</div>
状态如图
也就是说,通过class=button1是否含有来控制切换
关键知识点
1.由于button1和input都存在动态生成,所以不能使用click,也就是说要把
$(’.button1’).click(function(){}) 改为 $(’.button’).on(‘click’,function(){})
注意:只不过是有限制的,这个点击事件要和动态加载的内容在同一作用域中才行
2.获取图片的路径
var path = $("input:file").val();
var name = $('input:file').attr("name"); //获取name值
var ps = path.split("\\");
var filename = ps[ps.length - 1]
3.判断元素是否含有指定的类(class)
- hasClass(‘classname’)
- is(’.classname’)