手机端获取摄像头，点击多次拍照，点击拍照的图片可放大

//html
<div class="camera_img" onclick='takePhoto(6)'>
 
  <input type="file" id="image" class="image" accept="image/*" capture="camera"> 

</div> 


//js
var file;
//点击拍照
function takePhoto(state) {
    //改变到达的时间轴样式
    $('.cbp_tmtimeline_arrive').addClass('cbp_tmtimeline_arrives')
    $('.cbp_tmtimeline_arrive .cbp_tmicon').css("background-color", "green")
    document.getElementById('image').onchange = function (event) {
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload = function (e) {
            //console.log(e)
            var img = document.createElement("img");
            img.id = "img3";
            img.src = this.result;
            //点击放大图片
            img.onclick = function () {
                var temp = img.src;
                var objE = document.createElement("div");
                objE.innerHTML = `<div class="bgM">
                                  <img src="${temp}"  id="img_scan" class="img-custom-img2"/>
                                 </div>`;
                document.body.appendChild(objE.children[0]);
                //退出图片预览事件
                var $bg = document.querySelector(".bgM");
                $bg.onclick = function () {
                    var dm = document.querySelector(".bgM");
                    document.body.removeChild(dm);
                }
                //阻止事件冒泡
                var $img = document.querySelector(".img-custom-img2");
                $img.onclick = function (event) {
                    event.stopPropagation();
                }
            }
            $(".arrive_img").append(img);
        };
        file = this.files[0]; //传给后端
    };
}

$(function () {
function uploadImg(state) {
    var param = {}
    var formData = new FormData();
    param.rescueStateImage = state;
    param.longitude = lon;
    param.latitude = lat;
    param.eventId = $('#eventId').val();
    param.unitName=$("#unitName").val();
    formData.append("data", JSON.stringify(param));
    formData.append("file", file);
    $.ajax({
        url: '/kg_fksc/wxevent/updateDisposalStu',
        type: "post",
        cache: false,
        processData: false,
        contentType: false,
        data: formData,
        success: function (data) {
            //console.log(data)
     
    });
  }
}

//css
.image {
    position: absolute;
    width: 4rem;
    height: 4rem;
    left: 1rem;
    right: 0;
    bottom: 1rem;
    opacity: 0;

}
.bgM {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

.bgM img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    margin: auto;
}