使用 AJAX jquery 验证后的图片上传

Question

我正在使用 CodeIgniter。我试图在 jquery 验证后使用 AJAX 上传图像，但它不起作用。 Jquery 验证在字段为空的情况下有效。填写所有字段并单击提交按钮后，我的页面就会刷新。它没有调用控制器。

你能帮帮我吗？

$("#primary").validate({
    errorElement: 'div',
    rules: {
        first_name: {
            required: true,
            alphabets: true,
            minlength: 3
        },
        last_name: {
            alphabets: true            
        },
        profile_pic: {
            extension: "png|jpeg|jpg|gif"                      
        },
    },

    messages: {
        profile_pic: {
            extension: "Only PNG , JPEG , JPG, GIF File Allowed",
        },  
    },

    submitHandler: function(form)
    {
      var formData = new FormData(this);

            $.ajax({
                url: baseUrl + "/AddMember/addMembers",
                type: 'POST',
                //data: $('#primary').serialize(),
                data:formData,
                dataType: 'json',
                success: function(data) 
         {                  
            if (data.error == "true")
            {           
             //success message
            } 
          else {
               //error message
               }
          }

            });
    }

});

控制器代码

    $config=['upload_path'   =>'./uploads/images',
             'allowed_types' =>'gif|jpg|png|jpeg',
             'file_name'     =>uniqid().time().date("dmy")
             ]; 
            if ($this->upload->do_upload('profile_pic'))
            {
            $profile_pic_set = $this->upload->data('file_name');
            }
            else{$profile_pic_set = "";//set empty value if user not uploading any image
 }
                $this->load->library('upload', $config);
                $data = array(
                  'first_name'  =>  trim($this->input->post('first_name')),
                  'last_name'   =>  trim($this->input->post('last_name')),
                  'profile_pic' =>  $profile_pic_set
                   );   
                    print_r($data); //here I am getting profile_pic empty.

html

    <?php echo form_open_multipart('','id="primary"'); ?>
              <input type="text" name="first_name" id="first_name" class="form-control"  placeholder="First Name">
              <input type="text" name="last_name" id="last_name" class="form-control"  placeholder="Last Name">
<input type="file" name="profile_pic" id="file_upload">
              <button type="submit" class="btn btn-primary btn_new">Submit</button>
              <?php echo form_close(); ?>

Answer 1

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement

你的问题在FormData(this)里面。 this 代表验证器本身，而不是表单对象。表单对象由传递到 submitHandler.

的 form 参数表示

所以 FormData() 应该包含 form 参数。

此外，需要将Ajax processData和contentType参数设置为false...

submitHandler: function(form){
    var formData = new FormData(form);
    $.ajax({
        url: baseUrl + "/AddMember/addMembers",
        type: 'POST',
        data: formData, 
        dataType: 'json',
        processData: false,
        contentType: false,
        ....

参考文献:

Send image with ajax , using jquery validator on submitHandler

TypeError: 'append' called on an object that does not implement interface FormData

解决方案：

使用 AJAX jquery 验证后的图片上传

Image upload after jquery validation using AJAX

php

jquery

jquery-validate

codeigniter-3