微信图片上传

项目中有一个让人扫码注册的功能，可以在自己的APP中扫码，也可以用微信扫码。使用原生的界面很明显用微信扫码是有问题的。这个时候就要用到万能的H5了。可是事情没有那么顺利，因为有一个上传图片的功能。刚开始做的时候感觉没有任何问题，结果部署到app上和进行微信测试的时候出大毛病了

方案一：
使用单机事件，单机的时候创建一个type=file的input并且执行click方法。这样就能够调用打开文件的方法了

function hiClick(){
    var _CRE_FILE = document.createElement("input");
    _CRE_FILE.setAttribute("type", "file");
    _CRE_FILE.setAttribute("class", "imgfile");
    _CRE_FILE.setAttribute("name", "file");//设置name
    _CRE_FILE.setAttribute("id", name);//设置id
    $(that).after(_CRE_FILE);
    $(_CRE_FILE).click();
}

当选择文件打开之后你选择了文件就会触发input框的change事件，没有选择就不会触发。触发了就调用ajaxFileUpload这个插件进行文件上传

    /**
     * 选择了图片会触发input的change事件
     */
    $(".id").on("change", function (e) {
        $.ajaxFileUpload({
            type: 'POST',
            url: url,
            secureuri: false,
            fileElementId: id,
            dataType: "application/json",
            success: function (data) {
                console.log("成功",data);
            },
            error: function (data, status, e) {
                console.log("失败",e);
            }
        });
    });

没有应用可执行此操作
这个时候使用谷歌浏览器测试时完全没有问题的，可是到了微信上安卓手机提示没有权限或者是只能够调用文件却不能调用摄像头，苹果手机直接点不开。在app上苹果一个上传的好用一个不好用（我这是上传身份证正反面的所以需要俩个上传的），emmmm。这应该是大部分人对于这个需求的思路，这个思路是完全没有问题的，只需要添加一点东西就没问题了。

终极方案：
在创建type=file的input的时候添加下面这句话就万事大吉了

_CRE_FILE.setAttribute("accept", "image/*");//记录此对象对应的编号

accept如果不这么配置就会只打开文件没法使用相机，请注意

猜你喜欢