实现点击图片上传，再次点击重选图片的功能

实现点击图片上传，再次点击重选图片的功能

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’)

注意其中的区别