文件上传js打开文件管理器过滤只显示指定类型文件的实现

情况还原：图片上传源代码如下

function InitUploadPic() {
    //初始化图片上传
    myInitFileInput("CoverUrlfile",
            "",
            "",
            "acc\\user",
            "",
            "选择图片上传")
        .on("fileuploaded",
            function (event, data) {
                if (picUploadFlag) {
                    //获取返回的相对路径并拼出绝对路径
                    var reUrl = data.response.msg.url;
                    var abUrl = fileUploadUrl + reUrl;
                    $("#" + currentPic + "Img").attr("src", abUrl);
                    $("#" + currentPic + "Input").val(reUrl);
                }
            });
}

图片上传文件类型和图片大小判断js：

//上传图片的合法性判断
    $("#CoverUrlfile").change(function () {
        var file = this.files[0];
        //获取上传文件（图片）的大小（MB）
        var fileSize = Number(file.size) / 1024 / 1024;
        //获取上传文件（图片）的扩展名
        var fileNameArray = file.name.split('.');
        var fileTypeValue = "";
        if (fileNameArray.length > 1) {
            fileTypeValue = fileNameArray[fileNameArray.length - 1];
        }
        if ((fileTypeValue == "jpg" || fileTypeValue == "png" || fileTypeValue == "jpeg" || fileTypeValue == "gif")) {
            if (fileSize > 2) {
                $.modalMsg("图片大小不可超过2MB", "error");
                picUploadFlag = false;
            }
        } else {
            $.modalMsg("请上传jpg,jpeg,gif或png类型的文件", "error");
            picUploadFlag = false;
        }
    });

上传文件触发的input：

<input type="file" id="CoverUrlfile" style="display: none" />

实现的效果如下：点击图片 打开文件管理选择图片上传

但是 有一天 万恶的产品经理陈某突然提出文件管理器显示的文件要限制 除了那几种格式图片别的类型的文件就不要显示了 

mmp.....

于是 经过调查发现可以按照如下设置（调整绑定文件上传功能的input）：

<input type="file" id="CoverUrlfile" style="display: none" accept=".jpg,.jpeg,.gif,.png" />

就可以限制只有这四种图片可以显示 其他文件类型默认隐藏 效果如下：

大概就是这样 就是input有一个自带的属性可以配置。。。