ajax上传form表单或者文件以及结合validate验证

来源：互联网发布：java房卡麻将游戏源码编辑：程序博客网时间：2024/06/05 00:25

ajax上传form表单以及validate验证可以有两种方式

1.使用 jquery.form.js插件（可结合文件上传）;

2.原生ajax上传，序列化form表单元素（不可包含文件）;

js文件：jquery.validate jquery.form jquery

HTMl代码

<form id="restaurant-form" class="form-horizontal" action="rest/admin" method="post" enctype="multipart/form-data">    <div class="form-group">        <label class="col-md-3 control-label" for="name_en">Name(en) <span class="text-danger">*</span></label>        <div class="col-md-5">            <input class="form-control" type="text" id="name_en" name="name_en">        </div>    </div>    <div class="form-group">        <input type="file" id="logo" name="logo">    </div>    <div class="form-group">        <div class="col-md-6 col-md-offset-3">           <button class="btn btn-sm btn-primary" type="submit">Submit</button>        </div>    </div></form>

方式1代码---使用 jquery.form.js插件（可结合文件上传）

<script>            $(function(){        jQuery('#restaurant-form').validate({            errorClass: 'help-block animated fadeInDown',            errorElement: 'div',            errorPlacement: function(error, e) {                jQuery(e).parents('.form-group > div').append(error);            },            highlight: function(e) {                jQuery(e).closest('.form-group').removeClass('has-error').addClass('has-error');                jQuery(e).closest('.help-block').remove();            },            success: function(e) {                jQuery(e).closest('.form-group').removeClass('has-error');                jQuery(e).closest('.help-block').remove();            },            rules: {                'name_en': {                    required: true                }            }        });                $('#restaurant-form').ajaxForm({            forceSync:false,            success: function(data) {                //---执行相应代码            }        });    });</script>

方式2代码（不能序列化文件）---原生ajax上传，序列化form表单元素（不可包含文件）

<script>    $(function(){        jQuery('.js-validation-login').validate({            onsubmit:true,            errorClass: 'help-block text-right animated fadeInDown',            errorElement: 'div',            errorPlacement: function(error, e) {                jQuery(e).parents('.form-group .form-material').append(error);            },            highlight: function(e) {                jQuery(e).closest('.form-group').removeClass('has-error').addClass('has-error');                jQuery(e).closest('.help-block').remove();            },            success: function(e) {                jQuery(e).closest('.form-group').removeClass('has-error');                jQuery(e).closest('.help-block').remove();            },            rules: {                'username': {                    required: true,                    minlength: 3                }            },            messages: {                'username': {                    required: 'Please enter a username',                    minlength: 'Your username must consist of at least 3 characters'                }            },            submitHandler:function(form){                var param = $(form).serialize();                $.ajax({                    "url": 'restaurant/auth',                    dataType: 'json',                    type: 'post',                    data: param,                    success: function(data){                        //--相应代码                    }                 });            }        });            });    </script>

ajax上传文件有两种方式

1.使用插件ajaxfileupload(插件是半成品，有些许问题);

2.使用FormData包含文件域（支持HTML5）;

js文件： jquery ajaxfileupload

方式1代码--使用插件ajaxfileupload

$.ajaxFileUpload( {    url : 'restaurant/picture/upload',// 需要链接到服务器地址    fileElementId : 'img', // 文件选择框的id属性    dataType : 'json', // 服务器返回的格式，可以是json    type   : 'post',   //data : {"operation":1},    success : function(data) {           },    error : function(data) {    } });

方式2代码--使用FormData包含文件域（支持HTML5）

var formData = new FormData();formData.append('image', $('#img').files[0]);$.ajax({    url: 'image/upload',    type: 'post',    data: formData,    cache: false,    dataType: "json",    contentType: false,    processData: false,    success: function(data) {        }});

0 0