上传头像

html

<input type="file"  value="" id="headVal" accept="image/jpeg,image/jpg,image/png" />

js

 function uploadImg(tag) {
            var file = tag.files[0];
            var fileSize = file.size;
            var extName = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
            var img_ck = false;
            var imgSrc;

            if (fileSize > 20971520) {
                jqueryAlert({
                    'content': "图片超出限制大小！",
                    'closeTime': 2000
                })
               img_ck=false
            }
            else {
                     if (!/(jpg|png|jpeg)/.test(extName)) {
                        jqueryAlert({
                            'content': "头像只支持jpg、png、jpeg格式！",
                            'closeTime': 2000
                        })
                        img_ck = false;

                    } else {
                        img_ck = true;
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function () {
                            imgSrc = this.result;
                            $("#head_img").attr("src", imgSrc);//预览效果

                        };
                    }

                }
                return img_ck;
            }


$(document).on("change", "#headVal", function (e) {
            var imgBox = e.target;
            if (uploadImg(imgBox)) {
                var userId = $("#idVal").val();//获取用户id
                var formdata = new FormData();//formdata上传图片
                //数据加入
                formdata.append("file", document.getElementById('headVal').files[0]);
                formdata.append("id", userId);
                //传进文件服务器
                $.ajax({
                    type: 'post',
                    url: api_url + 'api/upload',
                    data: formdata,
                    cache: false,
                    processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                    contentType: false, // 不设置Content-type请求头
                    success: function (data) {

                        if (data.rtnCode == 0) {
                            $("#formImg").val(data.service);//成功回调出图片的服务器地址 存到input 中 等待下一步操作（保存用户信息接口）
                        } else {
                            alert("服务器错误!");
                        }
                    },
                    error: function (e) {
                    }

                })
            }
        })

注意点

在移动端页面使用上传文件或者图片时，IOS和安卓的展现方式有很多不一样。
input 有 captrure属性，取值：camera：相机；camcorder：摄像；microphone：录音
在安卓想要调用相机需要添加capture属性，于是我在IOS和Android上进行了三端测试!

1. 安卓：
   【微信】： 有capture，调相机； 无capture，相册相机一起调
   【QQ】： 有captrue，相册相机一起调； 无capture，调相册
   【浏览器】：有capture，调相机； 无capture，相册相机一起调

2. IOS
   【微信】： 有capture，调相机； 无capture，相册相机一起调
   【QQ】： 有capture，调相机； 无capture，相册相机一起调
   【浏览器】：有capture，调相机； 无capture，相册相机一起调
   我们可以看见，IOS表现行为一致，只要不加capture就可正常使用

而在Android上 QQ表现不一致，于是在实际开发中，我们只需要判断

if (isAndroid && type === 'qq') {
this.$refs.uploadFile.setAttribute('capture', 'camera');
}