vue结合bootstrap表单验证 FormValidation 图片验证

来源：互联网发布：mysql语句大全例子编辑：程序博客网时间：2024/06/06 03:40

效果图：
这里写图片描述

vue组件

var setFirmLogoVue=Vue.extend({    template: `    <div style="height:800px;width:80%" class="text-center">        <img :src="picUrl" alt="..." class="img-circle " style="width: 169px;height: 169px" ref='img0'>        <p style="color:#777;margin-bottom: 30px">头像预览</p>        <h4 style="margin-bottom: 20px">自定义头像： 选择本地照片，上传编辑自己头像</h4>        <form id="fileForm2" enctype="multipart/form-data" class="form-horizontal row" style="margin 0 auto;">        <div class="form-group">            <div  class="col-md-4 col-md-offset-4 "  >                <input  type="file"  name="file"  @change="handleFileChange" class="form-control">            </div>        </div>        </form>            <div style="color:#777;width:400px;margin: 20px auto 50px;">                <p>                格式： jpg、png格式            </p>                <p>            大小：不超过100KB            </p>            </div>        <button class="btn btn-primary" @click="uploadFirmLogo">上传头像</button>    </div>    `    ,components:{    }    ,    data(){        return{            picUrl:getCookie("firmLogo")||"/img/head.png"        }    },    mounted:function(){        var fields={};        var ss={            validators: {                notEmpty: {                    message: '请选择图片'                },                file: {                    extension: 'jpeg,jpg,png',                    type: 'image/jpeg,image/png',                    maxSize: 10000,                    message: '所选文件无效'                }            }        }        fields.file=ss        formValid("fileForm2",fields)//        $('#fileForm2').formValidation('addField', 'file', ss)//必填    },    methods:{        //选择改变图片        handleFileChange(e){            var vm=this;            let file = e.target.files[0];            let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];            if(supportedTypes.indexOf(file.type)<0){                layer.msg('文件格式只支持：jpg、jpeg 和 png');                return            }            if(file.size>10000){                layer.msg("大小不得超过100KB")                return;            }            if (file) {//                  this.queryFirmInfo["idPicUrl"]=URL.createObjectURL(file);                baseFileAjax(new FormData($( "#fileForm2" )[0]),function(result){                    if(result.ret==0){//                          alert(result.url);                        vm.picUrl=result.url;                    }else{                        layer.msg("修改图片失败！")                    }                })            }        },        //上传地址        uploadFirmLogo(){            layerAjax("uploadFirmLogo",{imgFile:this.picUrl},function(result){                $.cookie("firmLogo",this.picUrl);            },true)        },

formValidation的例子：
以下格式允许上传尺寸小于2 MB的JPEG，PNG图像。
编程代码

<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">    <div class="form-group">        <label class="col-xs-3 control-label">Avatar</label>        <div class="col-xs-6">            <input type="file" class="form-control" name="avatar" />        </div>    </div></form><script>$(document).ready(function() {    $('#fileForm').formValidation({        framework: 'bootstrap',        icon: {            valid: 'glyphicon glyphicon-ok',            invalid: 'glyphicon glyphicon-remove',            validating: 'glyphicon glyphicon-refresh'        },        fields: {            avatar: {                validators: {                    notEmpty: {                        message: 'Please select an image'                    },                    file: {                        extension: 'jpeg,jpg,png',                        type: 'image/jpeg,image/png',                        maxSize: 2097152,   // 2048 * 1024                        message: 'The selected file is not valid'                    }                }            }        }    });});</script>

声明代码

<form id="fileForm" class="form-horizontal" enctype="multipart/form-data"    data-fv-framework="bootstrap"    data-fv-icon-valid="glyphicon glyphicon-ok"    data-fv-icon-invalid="glyphicon glyphicon-remove"    data-fv-icon-validating="glyphicon glyphicon-refresh">    <div class="form-group">        <label class="col-xs-3 control-label">Avatar</label>        <div class="col-xs-6">            <input type="file" class="form-control" name="avatar"                data-fv-notempty="true"                data-fv-notempty-message="Please select an image"                data-fv-file="true"                data-fv-file-extension="jpeg,jpg,png"                data-fv-file-type="image/jpeg,image/png"                data-fv-file-maxsize="2097152"                data-fv-file-message="The selected file is not valid" />        </div>    </div></form><script>$(document).ready(function() {    $('#fileForm').formValidation();});</script>

formValidation官网：http://formvalidation.io/validators/file/#mime-types

阅读全文

0 0