使用bootstrap fileinput上传插件对图片文件上传做更加灵活的限制

这里实现的功能是上传图片限制图片的宽高比为2:1

html代码

<input type="file" name="txt_file" id="file" multiple />

js代码 

//初始化input
    $('#file').fileinput({
        language: 'zh', //设置语言
        uploadUrl: 'test', //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        browseClass: "btn btn-primary", //按钮样式     
        //dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });
    //绑定一个文件加载完成的事件
    $('#file').on('fileloaded',function(event, file, previewId, index, reader){
        var img = new Image();
        img.src = reader.result;//reder.result是base64图片格式的数据
        img.onload=function(argument){//可以通过img获取图片的信息再自己做逻辑判断
            if(this.width!=2*this.height){
                alert('图片不符合2:1宽高');
                $('.kv-file-remove:last').trigger('click');//不符合的话就触发对应的图片的删除点击事件
            }
        }
    });

有什么问题欢迎留言~