无法在codeigniter中使用ajax上传图片

Question

我正在尝试将图像上传到服务器，但每次出现“您没有选择要上传的文件”的错误时

我在我的视图中创建了一个表单，其中询问用户详细信息，如果选择了候选选项，则将要求用户选择图像。

当我上传图像并使用 jQuery 获取文件路径时，我得到了“C://fakepath/filename.png”，但为此我还配置了许多有效且仅返回文件名的内容。

我已经在名为upload 的根文件夹中创建了一个目录，但仍然无法在上传文件夹和服务器上上传任何图像。

查看.php

                <form method="POST" id="userForm" enctype="multipart/form-data">
                    <div class="form-row">
                        <div class="form-group col-sm-12 col-md-6">
                            <label>First Name *</label>
                            <input type="text" name="firstName" class="form-control" value="<?php echo set_value('firstName'); ?>">
                            <span class="text-danger" id="name_error"><?php echo form_error('firstName'); ?></span>
                        </div>
                        <div class="form-group col-sm-12 col-md-6">
                            <label>Last Name *</label>
                            <input type="text" name="lastName" class="form-control" value="<?php echo set_value('lastName'); ?>">
                            <span class="text-danger"><?php echo form_error('lastName'); ?></span>
                        </div>
                    </div>

                    <h5 class="bg-dark text-white p-3 text-center mt-2 mb-4">User Credentials</h5>  
                    <div class="form-group">
                        <label>Email *</label>
                        <input type="email" name="email" class="form-control" value="<?php echo set_value('email'); ?>">
                        <span class="text-danger"><?php echo form_error('email'); ?></span>
                    </div>
                    <div class="form-group">
                        <label>Password *</label>
                        <input type="password" name="password" class="form-control" value="<?php echo set_value('password'); ?>">
                        <span class="text-danger"><?php echo form_error('password'); ?></span>
                    </div>
                    <div class="form-group">
                        <label>Confirm Password *</label>
                        <input type="password" name="passwordMatch" class="form-control">
                        <span class="text-danger"><?php echo form_error('passwordMatch'); ?></span>
                    </div>

                    <h5 class="bg-dark text-white p-3 text-center mt-2 mb-4">User Status</h5>
                    <div class="form-group">
                        <label>User Status *</label>
                        <select class="form-control" id="userStatus" name="userStatus">
                            <option value="voter">Voter</option>
                            <option value="candidate">Candidate</option>
                            <option value="admin">Admin</option>
                        </select>
                        <span class="text-danger"><?php echo form_error('userStatus'); ?></span>
                    </div>
                    <div class="form-group" id="candidateSlogan">
                        <label>Candidate Slogan *</label>
                        <input type="file" name="userSlogan" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-success">Add User</button>
                </form>

阿贾克斯响应

    <script type="text/javascript">
        $("#userForm").submit(function(e){
            e.preventDefault();
            var firstName = $("input[name='firstName']").val();
            var lastName = $("input[name='lastName']").val();
            var email = $("input[name='email']").val();
            var password = $("input[name='password']").val();
            var passwordMatch = $("input[name='passwordMatch']").val();
            var userStatus = $("#userStatus").val();
            var slogan = $("input[name='userSlogan']").val();

            if (userStatus == 'candidate') {
                if(slogan == ''){
                    alert("Please Attach Candidate Slogan");
                }
            }

            $.ajax({
                method: 'POST',
                url: '<?php echo base_url(); ?>welcome/add_user_validation',
                data: {
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    password: password,
                    passwordMatch: passwordMatch,
                    userStatus: userStatus,
                    slogan: slogan
                },
                success: function(data){
                    $('#message').html(data);
                    if(data == 'User Added Successfully'){
                        $('#message').addClass("alert alert-success");
                        $('#message').removeClass("alert-danger");
                        $('#userForm')[0].reset();
                        $("input[name = 'firstName']").focus();
                    }
                    else{
                        $('#message').addClass("alert alert-danger");
                        $('#message').removeClass("alert-success");
                    }
                },
                error: function(data){
                    // alert(data);
                    $('#message').html(data);
                }
            });      
        });
    </script>

控制器.php

   public function add_user_validation(){
        // $this->load->helper(array('form', 'url'))  // already loaded in autoload.php;
        // $this->load->library('form_validation')    // declared in autoload.php;
        $this->form_validation->set_rules("firstName", "First Name", "required|trim|alpha");
        $this->form_validation->set_rules("lastName", "Last Name", "required|trim|alpha");
        $this->form_validation->set_rules("email", "Email", "required|trim|valid_email");
        $this->form_validation->set_rules("password", "Password", "required");
        $this->form_validation->set_rules("passwordMatch", "Password Comfirmation", "required|matches[password]");
        $this->form_validation->set_rules("userStatus", "User Status", "required");

        if($this->input->post('userStatus') == 'candidate'){
            $this->form_validation->set_rules("slogan", "Candidate Slogan", "required");

            if(isset($_POST['slogan'])){
                $config['upload_path'] = './upload/';
                $config['upload_types'] = 'png|jpg|jpeg';

                $this->load->library('upload', $config);
                echo "<script>alert('hello')</script>";

                if($this->upload->do_upload('slogan')){
                    $candidateSlogan = $this->upload->data();
                    // print_r($candidateSlogan);
                }
                else{
                    // echo $this->upload->display_erorrs();
                    // echo "This File type is not allowed";
                    // $candidateSlogan = NULL;
                    $error = array('error' => $this->upload->display_errors());
                    echo $error['error'];
                    // print_r($error);
                }
            }
        }
        else{
            $candidateSlogan = NULL;
        }

        if ($this->form_validation->run()) {
            $this->load->model('main_model');
            $data = array(
                "first_name"    =>  $this->input->post('firstName'),
                "last_name"     =>  $this->input->post('lastName'),
                "email"         =>  $this->input->post('email'),
                "password"      =>  $this->input->post('password'),
                "user_status"   =>  $this->input->post('userStatus'),
                // "slogan"     =>  $this->input->post('userSlogan')
                "slogan"        =>  $candidateSlogan
            );

            // echo "<script>alert(" . $data . ")</script>";
            print_r($data);

            if($this->main_model->add_user($data)){
                echo "User Added Successfully";
            }
            else{
                // $error_msg = $this->db->error();
                // echo $error_msg;
                echo "User Already Exists";
                // echo $this->db->error();
            }       
        }
        else{
            echo validation_errors();
        }
    }

Answer 1

您需要在文件的表单标签中使用它

enctype="multipart/form-data"

在 ajax 调用中为文件添加以下内容

        cache:false,
        contentType: false,
        processData: false,

并使用 formdata 而不是为每个输入手动执行

    var formData = new FormData(this);

现在你的ajax应该是这样的

         var formData = new FormData(this); // this will get all inputs from your form
         $.ajax({
            type:'POST',
            url: '<?php echo base_url(); ?>welcome/add_user_validation',
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            error: function(data){
                console.log("error");
                console.log(data);
            },
            success:function(data){
                console.log("success");
                console.log(data);
            },
        });