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

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

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

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

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

并隐藏之

 <center>
    <img src="data:images/Bitmap@2x.png" 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')[].files[]
console.log(frontFile)

控制台输出为：

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

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