我如何传递注册表格的数据并通过验证和通过Codeigniter中的Ajax在注册表格中上传图像

Question

我正在用我需要的所有数据和输入标签制作一张注册表，然后通过AJAX将数据传递到下一页。 但是我没有将图像上传值传递到下一页。 请帮助我找到有关ajaxfileupload.js和validation.js的解决方案，并告诉我如何使用codeigniter将图像存储在数据库中。

<script src="<?php echo JS_PATH;?>jquery-validation.js"></script> 

javascript：

$(document).ready(function() {
    $("#registration_form").validate({
        rules: {
            name: {
                required: true
            },
            surname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            name: {
                required: "Please enter your name"
            },
            surname: "Please enter your surname",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            }
        },
        submitHandler: submitForm
    });

    function submitForm() {
        var name = $('#name').val();
        var surname = $('#surname').val();
        var age = $('#age').val();
        var dob = $('#datepicker').val();
        var ph_no = $('#ph_no').val();
        var gender = $('input[type="radio"]:checked').val();
        var hobbies = new Array();
        $('input[name="hobbies[]"]:checked').each(function() {
            hobbies.push(this.value);
        });
        var city = $('#city').val();
        var email = $('#email').val();
        var pwd = $('#password').val();
        var photo = $("#userfile").val();
        $.ajax({
            url: "<?php echo SITE_ROOT;?>Registration/insertdata",
            type: "POST",
            data: {
                username: name,
                user_surname: surname,
                user_email: email,
                password: pwd,
                user_age: age,
                user_dob: dob,
                user_ph_no: ph_no,
                user_gender: gender,
                user_hobbies: hobbies,
                user_city: city,
                user_photo: photo
            },
            success: function(data) {
                alert(data);
            }
        }
    });
}

的HTML：

<form method="post" enctype = "multipart/form-data" > 
    <label> File Input: </label> 
    <input type="file" name="userfile" id="userfile">
    <input type="submit" name="submit" value="Submit" />
</form>  

php控制器：

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Registration extends CI_Controller 
{
    function __construct() {
        parent::__construct();
        $this->load->model('menupages/registration_model');
    }

    public function index() {
        $this->first();
    }

    function first() {
        $data['title'] = "Registration Page";
        $this->load->view('menupages/registration', $data);
    }

    function insertdata() {
        $file = $_POST['user_photo'];
        print_r($file);
        exit();
        $config['upload_path'] = '/var/www/html/upload/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '100';
        $config['file_name'] = $file;
        $this->load->library('upload'); //initialize 
        $this->upload->initialize($config); 
        if ( ! $this->upload->do_upload('userfile'))  {
            $error = array('error' => $this->upload->display_errors());
            print_r($error);
            exit(); 
        }  else  {   
            $data = array('upload_data' => $this->upload->data()); 
            print_r($data);
            exit();  
        }
    }
}

Answer 1

首先，有很多事情与您在php codeginiter的控制器中当前的代码不兼容，让我们首先看看$_POST与$_FILES之间的区别

$ _POST包含表单中的所有数据（文件除外）

$ _FILES包含通过表单发送到服务器的所有文件（仅从<input type="file" /> ）

您正在做的是，您正在使用$_POST['user_photo']来获取文件详细信息，而不能获取用于上载的文件信息。 还有另一件事是：

 $this->upload->do_upload('userfile'); 

你错了 您的http请求中甚至不存在参数userfile 。 在将数据发送到服务器时，您已经用user_photo替换了userfile ，因此您还必须更改这两件事。

$_POST['user_photo']; 
$this->upload->do_upload('userfile');

至

$_FILES['user_photo']; 
$this->upload->do_upload('user_photo');

改变你的 ：

 $('#userfile').val();

至

 $("#userfile").prop("files")[0];

并将这些参数以及url，data等添加到javascript参数中。

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

将您的submitForm函数更改为此：

function submitForm() {
                var name = $('#name').val();
                var surname = $('#surname').val();
                var age = $('#age').val();
                var dob = $('#datepicker').val();
                var ph_no = $('#ph_no').val();
                var gender = $('input[type="radio"]:checked').val();
                var hobbies = new Array();
                $('input[name="hobbies[]"]:checked').each(function() {
                    hobbies.push(this.value);
                });
                var city = $('#city').val();
                var email = $('#email').val();
                var pwd = $('#password').val();
                var photo = $("#userfile").prop("files")[0];

                var form_data = new FormData();
                form_data.append("user_photo", photo);
                form_data.append("username",name);
                form_data.append("user_surname",surname);
                form_data.append("password",pwd);
                form_data.append("user_age",age);
                form_data.append("user_dob",dob);
                form_data.append("user_ph_no",ph_no);
                form_data.append("user_gender",gender);
                form_data.append("user_hobbies",hobbies);
                form_data.append("user_city",city);
                $.ajax({
                        url: "<?php echo SITE_ROOT;?>Registration/insertdata",
                        type: "POST",
                        data: form_data,
                        success: function(data) {
                            alert(data);
                        }
                    }
                });
        }

Answer 2

在JavaScript上使用FormData（）。

---

data = new FormData();

data.append('name', $('#name').val());
data.append('surname', $('#surname').val());
data.append('age', $('#age').val());
data.append('dob', $('#datepicker').val());
data.append('ph_no', $('#ph_no').val());
data.append('gender', $('input[type="radio"]:checked').val());

//for Photo
data.append('photo', $('#userfile')[0].files[0]);


//AJAX
$.ajax({
            url: "<?php echo SITE_ROOT;?>Registration/insertdata",
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data)
            }
        });

PHP代码：要测试您是否成功传递了文件并将数据发布到php上：

print_r（$ _ FILES）; print_r（$ _ POST）;

Answer 3

您可以提交表单并通过JQuery中的form.serialize发送。 它将发送带有Ajax图片的数据。