文件上传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有一个自带的属性可以配置。。。

更多相关文章

随机推荐