input type="file"文件或者照片上传

js代码

function changepic() {
        var reads = new FileReader();
        f = document.getElementById('mask_addUsedRecord_file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            var str = `<div class="mask_addUsedRecord_pic"><img src="${e.srcElement.result}" alt=""><span class="mask_addUsedRecord_guanbi"><i class="iconfont icon-close"></i></span></div>`
           $('.mask_addUsedRecord_img').append(str);
            $("#mask_addUsedRecord_file").val('');
           picNum ++;
           if(picNum  == 3){
               $('.mask_addUsedRecord_img .mask_addUsedRecord_image').hide();
           }
        };
      }

html代码

                         <div class="mask_addUsedRecord_image"><span style="margin-top: 14px;font-size: 28px;font-weight: 100;">+</span><input type="file" id="mask_addUsedRecord_file" onchange="changepic(this)" accept="image/*"> <span>上传照片</span></div>

上传照片限制上传图片次数为3次，判断按钮的隐藏和显示
input 输入框的样式 css

#mask_addUsedRecord_file{
        width: 104px;
        height: 104px;
        position: absolute;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

设置input的样式为透明，定位覆盖在区域内