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。在将数据发送到服务器时，您已将userfile替换为user_photo，因此您必须更改这两项内容

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

到

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

改变你的：

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

到

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

并将这些参数与url，数据等一起添加到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

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

如何通过注册表格传递数据并通过验证和通过codeigniter中的ajax上传图像

3 个答案: