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)