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

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

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

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

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

并隐藏之

<center>
   <img src="images/[e-mail]" class="avatar">
   <input type="file" id="file" accept="image/*" capture='camera' multiple>
</center>

#file {
   display: none;
}

 

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

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

 

3.给ios去掉capture属性，这样iphone才能调用相册。这段代码可以提取到公共js里复用。

var file = document.querySelector('input');
if (getIos()&&file) {
    file.removeAttribute("capture");
}
function getIos() {
    var ua=navigator.userAgent.toLowerCase();
    if (ua.match(/iPhone\sOS/i) == "iphone os") {
        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)