如何使用Ajax在Codeigniter中上传图像

Question

这是我的代码，请检查一下，我正在尝试上传图片，但无法正常工作。 Iam使用ID通过Ajax传递数据。

我获得图像名称，同时通过codeigniter它显示错误未定义的user_img

下面的代码是Ajax

$('#profile_set').validate({

            submitHandler: function(form) {

                user_zip = $("#user_zip").val();
                first_name = $("#xx_first_name").val(); 
                db_email = $("#db_email").val(); 
                datepicker = $("#datepicker").val(); 
                last_name = $("#xx_last_name").val();
                new_image = $("#new_image").val();

                $.ajax({
                    url: "<?php echo base_url('myaccount/profile/'.$this->session->userdata('id').''); ?>",
                    type: "post",
                    fileElementId   :'new_image',
                    dataType: 'json',
                    data: {
                        xx_first_name: first_name,
                        xx_last_name: last_name,
                        db_email: db_email,
                        db_dob: datepicker,
                        user_zip: user_zip,
                        user_img: new_image
                        },
                    success: function (data) {
                        if(data.status == 'success'){
                            $('#message').removeClass('alert alert-danger');
                            $('#message').addClass('alert alert-success');
                            $('#message').empty();
                            $('#message').append(data.message); 
                            $('#message').fadeOut(3000);
                        }
                        else if(data.status == 'fail') {
                            $('#message').removeClass('alert alert-success');
                            $('#message').addClass('alert alert-danger');
                            $('#message').empty();
                            $('#message').append(data.message);
                        }
                    }

                }); 
            }
        });

在此函数中，获取图像名称，其显示profile_img ['file_name'=> $ _FILES ['user_img'] ['name']]的未定义索引

public function profile($id)
{
    $user_id = $id;

    $profile_img = $this->input->post('user_img');


    if ($user_id !== '' AND $user_id > 0) {

        if(!empty($profile_img)){

            $uploadconfig = array(
                    'upload_path' => './uploads/',
                    'allowed_types' => 'gif|jpg|png',
                    'max_size' => '204800',
                    'file_name'  => $_FILES['user_img']['name'],
                    'encrypt_name' => TRUE
                );

                print_r($uploadconfig); exit;

                $this->load->library('upload', $uploadconfig);          

                if ( ! $this->upload->do_upload("user_img")) {
                    echo "failed to upload file(s)";
                }
                $this->upload->initialize($uploadconfig);
                $this->upload->do_upload("user_img");
                $upload_data = $this->upload->data();
                $user_profile = $upload_data['file_name'];

                $data = array();
                $data['first_name'] = $this->input->post('xx_first_name');
                $data['last_name'] = $this->input->post('xx_last_name');
                $data['email'] = $this->input->post('db_email');
                $data['user_dob'] = $this->input->post('db_dob');
                $data['user_zip'] = $this->input->post('user_zip'); 
                $data['user_img'] = $user_profile;              
        }

        else {

            $data = array();
            $data['first_name'] = $this->input->post('xx_first_name');
            $data['last_name'] = $this->input->post('xx_last_name');
            $data['email'] = $this->input->post('db_email');
            $data['user_dob'] = $this->input->post('db_dob');
            $data['user_zip'] = $this->input->post('user_zip');
        }

        $update_set = $this->users->update($id, $data);

        if ($update_set)
        {
            $ret['status'] = 'success';
            $ret['message'] = 'Updated successfully';
            echo json_encode($ret);
        }
        else
        {
            $ret['status'] = 'fail';
            $ret['message'] = 'Error while updating';
            echo json_encode($ret);
        }   
    }
}

我的论坛代码

<div class="account_forum" id="profile">
                    <h2 class="forum_title">Profile</h2>            
                     <form id="profile_set">
                        <div class="row row_space"> 
                            <div class="col-md-10">                         
                                <a class="profile-pic" id="existing_pic">
                                  <div class="profile-pic" style="background-image: url('<?php echo base_url('uploads/')?><?php echo @$users->user_img ?>')" >
                                      <span class="glyphicon glyphicon-camera"></span>
                                      <span>Change Image</span>
                                  </div>
                                </a>
                              <input type='file' name="new_image" id="new_image" onchange="readURL(this);" style="display:none;" />
                                <a class="profile-pic" id="new_upload">
                                  <div class="profile-pic" id="view_image">
                                      <span class="glyphicon glyphicon-camera"></span>
                                      <span>Change Image</span>
                                  </div>
                                </a>
                            </div>
                        </div>  

                        <div class="row row_space">
                            <div class="col-md-5">
                                <label>First Name</label>
                                <input type="text" name="xx_first_name" id="xx_first_name" class="form-control" placeholder="John" value="<?php echo set_value('xx_first_name', @$users->first_name);?>" required>
                            </div>
                            <div class="col-md-5">
                                <label>Last Name</label>
                                <input type="text" name="xx_last_name" id="xx_last_name" class="form-control" placeholder="Doe" value="<?php echo set_value('xx_last_name', @$users->last_name);?>" required>
                            </div>
                        </div>  
                        <div class="row row_space">
                            <div class="col-md-5">
                                <label>Email</label>
                                <input type="text" name="db_email" class="form-control" id="db_email" placeholder="jdoe@gmail.com" value="<?php echo set_value('db_email', @$users->email);?>" required>
                            </div>
                            <div class="col-md-5">
                                <label>Birthday</label>
                                <input type="text" name="db_dob" class="form-control" data-toggle="datepicker" placeholder="00/0/0000" id="datepicker" value="<?php echo set_value('db_dob', @$users->user_dob);?>" required>
                            </div>
                        </div>  
                        <div class="row row_space">
                            <div class="col-md-5">
                                <label>Postal Code</label>
                                <input type="text" id="user_zip" name="user_zip" class="form-control" placeholder="00000" value="<?php echo set_value('xx_user_zip', @$users->user_zip);?>" required>
                            </div>
                        </div>  
                        <input type="hidden"  id="profile_old"  name="profile_old"  value="<?php $users->user_img; ?>">
                        <div class="row row_space">
                            <div class="col-md-5">
                                <button type="submit" name="" class="acct_btn" value="Update">Update Profile</button>   
                            </div>
                        </div>
                     </form>                    
                </div>

Answer 1

为了使用ajax将新图像上传到服务器，您需要使用new FormData() ：

var fd = new FormData();    
fd.append( 'user_zip', user_zip);
fd.append( 'xx_first_name', first_name);
fd.append( 'db_email', db_email);
fd.append( 'db_dob', datepicker);
fd.append( 'xx_last_name', last_name);
fd.append( 'user_img', $('#new_image')[0].files[0]);

$.ajax({
    url: "<?php echo base_url('myaccount/profile/'.$this->session->userdata('id').''); ?>",
    type: "post",
    data: fd,
    success: function () {
        // do something
    }
});