需求: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)