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：FormData.constructor的参数1没有实现HTMLFormElement接口

您的问题在FormData(this)内部。 this代表验证者本身，而不是表单对象。表单对象由传递到form的{{1}}参数表示。

因此submitHandler应该包含FormData()参数。

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

false

参考：

Send image with ajax , using jquery validator on submitHandler

TypeError：在未实现接口FormData的对象上调用了'append'

解决方案：https://stackoverflow.com/a/25390646/594235

使用AJAX进行jquery验证后上传图片

1 个答案: