javascript - "You did not select a file to upload. "使用ajax上传图片时出现这个错误

Question

我正在使用 CodeIgniter 和 jQuery ajax。我想使用ajax上传图片。但它显示错误，如 You did not select a file to upload.

这里，我写了jQuery:

jQuery(document).on('submit', '#signup_form', function()
		{
			//debugger;
			var data = jQuery(this).serialize();
			jQuery.ajax({
				type : 'POST',
				url  : '<?php echo base_url()."front/ajax_register"; ?>',
				data : data,
				success :  function(data)
				{
					jQuery(".result").html(data);
				}
			});
			return false;
		});

<form id="signup_form" method="post" enctype="multipart/form-data">
   <div class="row">
        <div class="col-md-3">Upload Photo</div>
        <div class="col-md-4">
            <input type="file" name="pic" accept="image/*">
        </div>
   </div>
   <div class="row">
        <button type="submit" class="btn btn-default">Submit</button>       
   </div>
</form>

我的函数是这样的:

function ajax_register()
{
    if($this->input->post())
    {
        $this->form_validation->set_rules('pass', 'Password', 'required|matches[cpass]');
        $this->form_validation->set_rules('cpass', 'Password Confirmation', 'required');

        if($this->form_validation->run() == true)
        {
            $img = "";
            $config['upload_path'] = './uploads/user/';
            $config['allowed_types'] = 'gif|jpg|png|jpeg';
            $this->upload->initialize($config);

            if ( ! $this->upload->do_upload('pic'))
            {   
                $data['error'] = array('error' => $this->upload->display_errors());
                print_r($data['error']);exit;
                $data['flash_message'] = "Record is not inserted";
            }
            else
            {
                $upload = $this->upload->data();
                //print_r($upload);exit;
                $data = array(
                        'ip_address'            =>$this->input->ip_address(),
                        'first_name'            =>$this->input->post('firstname'),
                        'last_name'             =>$this->input->post('lastname'),
                        'phone'                 =>$this->input->post('phone'),
                        'email'                 =>$this->input->post('email'),
                        'group_id'              =>$this->input->post('role'),
                        'password'              =>$this->input->post('password'),
                        'image'                 =>$upload['file_name'],
                        'date_of_registration'  =>date('Y-m-d')
                    );
                print_r($data);exit;
                $user_id = $this->admin_model->insert_user($data);

                $user_group = array(
                        'user_id'   => $user_id,
                        'group_id'  => $this->input->post('role')
                    );

                $this->admin_model->insert_group_user($user_group);
                echo "<p style='color:red;'>You are successfully registerd.</p>";                
            }
        }
        else
        {
            echo "<p style='color:red;'>".validation_errors()."</p>";
        }
    }
}

那么如何解决这个问题？我应该在我的代码中更改什么？

Answer 1

正如我所说，问题可能出在您发送到后端的数据中。如果您想提交带输入文件的 AJAX，请使用 FormData。

试试这个:

jQuery(document).on('submit', '#signup_form', function()
{
    //debugger;
    var data = new FormData($('#signup_form')[0]);

    jQuery.ajax({
        type : 'POST',
        url  : '<?php echo base_url()."front/ajax_register"; ?>',
        data : data,
        processData: false,
        contentType: false,
        success :  function(data)
        {
            jQuery(".result").html(data);
        }
    });
    return false;
});