javascript - 在 CodeIgniter 中使用 AJAX 提交带有图像的表单

Question

我正在尝试使用 AJAX CodeIgniter 提交包含文本字段和图像的表单。

首先我尝试使用 AJAX 上传图像

HTML

<form id="frm_add_school" role="form" class="form-validation" method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label">School Name</label>
                <label style="color:red;" id="scl_name_error"></label>
                <div class="append-icon">
                    <input type="text" id="scl_name" name="scl_name" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
                    <i class="icon-user"></i>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label">Email Address</label>
                <label style="color:red;" id="scl_email_error"></label>
                <div class="append-icon">
                    <input type="email" id="scl_email" name="scl_email" class="form-control" placeholder="Enter your email..." required>
                    <i class="icon-envelope"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label">Phone Number</label>
                <label style="color:red;" id="scl_Phonenumber_error"></label>
                <div class="append-icon">
                    <input type="text" id="scl_Phonenumber" name="scl_Phonenumber" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
                    <i class="icon-user"></i>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label">Address</label>
                <label style="color:red;" id="scl_Address_error"></label>
                    <div class="append-icon">
                        <input type="text" id="scl_Address" name="scl_Address" class="form-control" placeholder="Enter your address..." required>
                        <i class="icon-envelope"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Password</label>
                    <label style="color:red;" id="scl_password_error"></label>
                    <div class="append-icon">
                        <input type="password" id="scl_password" name="scl_password" class="form-control" placeholder="Between 4 and 16 characters" minlength="4" maxlength="16" required>
                        <i class="icon-lock"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Repeat your password</label>
                    <label style="color:red;" id="scl_password2_error"></label>
                    <div class="append-icon">
                        <input type="password" id="scl_password2" name="scl_password2" class="form-control" placeholder="Must be equal to your first password..." minlength="4" maxlength="16" required>
                        <i class="icon-lock"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Time of Lunch</label>
                    <label style="color:red;" id="scl_TimeofLunch_error"></label>
                    <div class="append-icon">
                        <input type="text" id="scl_TimeofLunch" name="scl_TimeofLunch" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
                        <i class="icon-user"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Total Number Of Student</label>
                    <label style="color:red;" id="scl_TotalNumberOfStudent_error"></label>
                    <div class="append-icon">
                        <input type="text" id="scl_TotalNumberOfStudent" name="scl_TotalNumberOfStudent" class="form-control" placeholder="Enter a number..." required>
                        <i class="icon-envelope"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">School Picture</label>
                    <div class="file">
                        <div class="option-group">
                            <span class="file-button btn-primary">Choose File</span>
                            <input type="file" class="custom-file" name="avatar" id="avatar" onchange="document.getElementById('uploader').value = this.value;" required>
                            <input type="text" class="form-control" name="uploader" id="uploader" placeholder="no file selected" readonly="">
                        </div>
                    </div>
                </div>
            </div>                          
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Admin Name</label>
                    <label style="color:red;" id="scl_admin_name_error"></label>
                    <div class="option-group">
                        <select id="scl_admin_name" name="scl_admin_name" class="language" required>
                            <option value="">Select Admin...</option>
                            <option value="EN">1</option>
                            <option value="FR">2</option>
                            <option value="SP">3</option>
                            <option value="CH">4</option>
                            <option value="JP">5</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">                          
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Are you OK with our terms?</label>
                    <label style="color:red;" id="scl_terms_error"></label>
                    <div class="option-group">
                        <label  for="terms" class="m-t-10">
                            <input type="checkbox" name="terms" id="terms" data-checkbox="icheckbox_square-blue" required/>
                            I agree with terms and conditions
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center  m-t-20">
            <button type="submit" id="submit_school" class="btn btn-embossed btn-primary">Sign Up</button>
            <button type="reset" class="cancel btn btn-embossed btn-default m-b-10 m-r-0">Cancel</button>
        </div>
    </form>

Ajax 代码

<script type="text/javascript">

$(document).ready (function(){
    $("#frm_add_school").submit ( function(e){
        e.preventDefault();
        var school_name        = $('form #scl_name').val();
        var email              = $('form #scl_email').val();
        var phone              = $('form #scl_Phonenumber').val();
        var address            = $('form #scl_Address').val();
        var password           = $('form #scl_password').val();
        var password2          = $('form #scl_password2').val();
        var lunch_time         = $('form #scl_TimeofLunch').val();
        var no_of_students     = $('form #scl_TotalNumberOfStudent').val();
        var avatar             = $('form #avatar').val();
        var scl_admin_name     = $('form #scl_admin_name').val();

        if(school_name == "" || school_name.length < 3){
            $('#scl_name_error').html("</b>Please enter a valid School name.</b>");
        }else if(!isValidEmailAddress( email )){
            $('#scl_email_error').html("</b>Please enter a valid email.</b>");
        }else if(phone == "" || phone.length < 3 ){
            $('#scl_Phonenumber_error').html("</b>Please enter a valid phone number.</b>");
        }else if(password = "" || password !== password2){
            $('#scl_password2_error').html("</b>password combination does not match.</b>");
            $('#scl_password_error').html("</b>password combination does not match.</b>");
        }else if(lunch_time == "" || lunch_time.length < 3 ){
            $('#scl_TimeofLunch_error').html("</b>Please enter a valid lunch time.</b>");
        }else if(scl_admin_name==0){
            $('#scl_admin_error').html("</b>Please Select a admin.</b>");
        }else{
            var formData = $('#frm_add_school').serialize();
            console.log(formData);

            $.ajax({
                type:"POST",
                dataType: 'json',
                url:"<?php echo base_url('administrator/add_school/'); ?>",
                data: formData,
                success: function(stream) {
                    console.log(stream.total);
                }
            });                    
        }
    });
});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};

</script>

Controller

function add_school(){
    $post_data['school_name']   = $this->input->post('scl_name');
    $post_data['email']         = $this->input->post('scl_email');
    $post_data['phone']         = $this->input->post('scl_Phonenumber');
    $post_data['address']       = $this->input->post('scl_Address');
    $post_data['password']      = md5($this->input->post('scl_password'));
    $post_data['lunch_tim']     = $this->input->post('scl_TimeofLunch');
    $post_data['nof_students']  = $this->input->post('scl_TotalNumberOfStudent');
    $post_data['admin_name']    = $this->input->post('scl_admin_name');

    if($post_data['school_name']){

        if($_FILES["avatar"]){
        $config = array();
        $config['upload_path'] = './school_image/';
        $config['allowed_types'] = 'gif|jpg|jpeg|png';
        $config['max_size']      = '10000';
        $config['file_name'] = 'lankahomes_21';
        $config['overwrite']     = false;

        $this->upload->initialize($config);

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

        $image_data = array('upload_data' => $this->upload->data());

        }

    }else {
        $this->load->view('add_school');
    }


}

有人可以帮我在 CodeIgniter 中使用 AJAX 上传图像吗？ TNx..

Answer 1

要使用ajax上传文件，请使用formdata

var postData = new FormData(this);
$.ajax({
       type:"POST",
       dataType: 'json',
       url:"<?php echo base_url('administrator/add_school/'); ?>",
       data: formData,
       type: "POST",
       data : postData,
       processData: false,
       contentType: false,
         success: function(stream) {
         console.log(stream.total);
        }
    });