H5调用相机和相册更换头像

需求：H5调用手机的相机和相册从而实现更换头像的功能

这个功能是很常用的一个功能，因此做一个记录。

1.在头像img下加一个文件输入框

<input type="file" id="file" accept="image/*" capture='camera' multiple>

并隐藏之

<center>
    <img src="images/Bitmap@2x.png" class="avatar">
    <input type="file" id="file" accept="image/*" multiple>
</center>

#file {
    display: none;
}

 

2.点击头像触发文件输入框点击事件

$(".avatar").click(function(){
    $("#file").trigger("click")
})

 

3.适配小米手机

if (getIos()) {
    $('#file').attr('capture','')
}
function getIos() {
    var ua=navigator.userAgent.toLowerCase()
    if(ua.indexOf('mix')>-1){
        return true
    }else {
        return false
    }
}

 

4.通过js拿到上传的文件内容，转成base64编码并显示图片在页面上

//转成base64
$('input[type=file]').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        console.log(reader.result);  //或者e.target.result都是一样的，都是base64码
        $(".avatar").attr("src", reader.result);
     }
    reader.readAsDataURL(this.files[0])
    //filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
})

 

5.实现效果页面展示

更换头像前的效果：

 

 更换头像后的效果：

附：获取File对象的方式为

frontFile = $('#file')[0].files[0]
console.log(frontFile)

控制台输出为：

我们可以通过封装File对象到FormData，与上传图片接口对接，如：

let formData
formData = new FormData()
formData.append('mFile',frontFile)