AJAX Javascript警告消息未显示输入Type =＆＃34; file＆＃34;

Question

我正在多部分表单上传递警报验证消息，该表单还包含使用AJAX的文件字段，以及codeigniter中的JSON。但警报消息适用于除输入类型=＆＃34;文件＆＃34;之外的每个表单字段。它在每个字段上都显示完整的警报信息，但不在图像字段上显示。有关详细信息，我在下面提到了我的代码，如果有任何错误，请帮助我。

HTML表格代码##

<div id="mes></div> 
<div class="form-group row">                                    
    <div class="col-md-3 col-xs-12">                                                                                
        <input type="text" name="title" class="form-control input-sm" placeholder="Title here">
    </div>
    <div class="col-md-4 col-xs-12">                                                                                
        <input type="text" name="detail" class="form-control input-sm" placeholder="Description here">
    </div>
    <div class="col-md-2 col-xs-12">                                                                                
        <input type="file" name="img" class="form-control input-sm">                            
    </div>
    <div class="col-md-1 col-xs-12">                                                                                
        <input type="text" name="orderby" class="form-control input-sm" placeholder="Order No">                 
    </div>
    <div class="col-md-2 col-xs-12 text-right">
        <label></label>
        <div class="btn-group">
            <a type="submit" class="btn btn-success btn-sm" id="search" title=""><i class="fa fa-search"></i> Search</a>
            <button type="submit" class="btn btn-success btn-sm" id="save" title=""><i class="fa fa-save"></i> Save</button>
        </div>                                      
    </div>
</div>                              

Javascript代码

jQuery(document).ready(function($) 
{ 
    $('#formData').ajaxForm( 
    {
        beforeSubmit: function(formData, jqForm, options)
        { $("div#mes").html(''); },
        success:function(res)
        {             
            var result= $.parseJSON(res);
            $("div#mes").html('<div class="alert '+result.mes+' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+result.msg+'</div>');
            if (result.mes == 'text-success') 
            {
                $('#formData').clearForm();
            }
        }           
    });   
});

控制器代码

public function save(){     
    $res = array();     
    //form field validation rules
    $this->form_validation->set_rules('title', 'Title', 'required');
    $this->form_validation->set_rules('detail', 'Detail', 'required');
    $this->form_validation->set_rules('orderby', 'Set Order', 'required|is_unique[slider.orderby]');    
    //form Validation
    if (!$this->form_validation->run()) {           
        echo json_encode(array('mes' => 'alert-danger', 'msg' => 'Opps! Something wrong please check the fields below.'));          
        exit;
    }           
    // imaage configuration
    $config['upload_path'] = 'fassets/images/slider';
    $config['allowed_types'] = 'jpg|jpeg|png|gif';
    $config['file_name'] = $_FILES['img']['name'];
    //Load upload library and initialize configuration
    $this->load->library('upload', $config);            
    if(!$this->upload->do_upload('img'))
    {       
        $error = $this->upload->display_errors('', '<br>');
        echo json_encode(array('mes' => 'alert-danger', 'msg' => $error));
        exit;           
    }
    //prepare data      
    $userData = array(
        'title' => $this->input->post('title'),
        'detail' => $this->input->post('detail'),                               
        'img' =>  $this->upload->data('file_name'),
        'orderby'=> $this->input->post('orderby')
    );         
    //Pass user data to model
    $insertUserData = $this->slidermodel->insert($userData);

    //Storing insertion status message.
    if($insertUserData){
        $res = array(
            'mes' => 'alert-success',
            'msg' => "Record has been saved successfully.",
        );
        echo json_encode($res);
    } else {
        $res = array(
            'mes' => 'alert-danger',
            'msg' => "Oops! Something went wrong.",
        );
        echo json_encode($res);
    }         
}   

Answer 1

此行是您的问题$config['file_name'] = $_FILES['img']['name'];

您可以删除以上行，因为CI已经为您执行此操作！

如果没有上传任何内容，并且启用了错误报告，您将获得输出，该输出将在您的ajax调用中声明类似Message: Undefined index: img的内容。因此，您的脚本将无法解析json响应。

为了将来参考，您可以通过查看Developer Tools > Network > {REQUEST_NAME} > Response（宝贵的工具）中返回的内容来调试ajax调用。