html打开手机相机和相册，上传图片

手机端Html页面实现上传头像功能，之前一直百度js的代码，其实用不着，input标签，type=file就可以了，效果如图，点击头像上传更换头像，当然直接用input样式比较麻烦，(反正我觉得麻烦，对css不是很精通),然后我就通过点击div来触发input按钮

HMTL代码：

  					<div class="hui-list-text">
                        <div class="hui-list-text-content">头像</div>
                        <div class="hui-list-info set-up-img" onclick="selectFile()" id="head">
                            <img src="<%=model.avatar %>" id="headImg" />
                            <span class="hui-icons hui-icons-right"></span>
                        </div>
                        <input class="upload-img" type="file" name="cover" accept="image/*" style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0;" onchange="uploadImg(this)" id="android" />

                    </div>

input被隐藏了，注意不用display:none,或者hidden,会没有效果，通过点击div触发input按钮

js:

//触发Input按钮
  function selectFile() {
        $("#android").trigger("click");
    }
    //选择文件事件
  function uploadImg(e) {
        var files = e.files;
        console.log(files[0]);
        if (files.length == 0) {
            return;
        }
        var form = new FormData();
        // 可以增加表单数据
        form.append("Filedata", files[0]);                           // 文件对象
        var file = files[0];
        $.ajax({
            url: ' ',//后台上图接口
            type: "POST",
            data: form,
            dataType: 'json',
            processData: false,  //tell jQuery not to process the data
            contentType: false,  //tell jQuery not to set contentType
            success: function (res) {
                if (res.status == 1) {                
                    $("#headImg").prop("src", res.path);
                } else {                 
                }
            }
        });
    }

在手机测试时，有些浏览器会自动让你选择拍照或者图片，就是这样子，后台接口的代码就不发了