AJAX Javascript警报消息未显示在输入类型=“文件”答案

【问题标题】：AJAX Javascript Alert message Not showing on input Type="file"AJAX Javascript警报消息未显示在输入类型=“文件”
【发布时间】：2018-05-01 10:13:21
【问题描述】：

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

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);
    }         
}

【问题讨论】：

如果表单验证通过并且上传失败，您应该看到您的$error = $this->upload->display_errors('', '<br>');;你不是？
是的错误出现由后端发送但未显示在客户端...
对不起：您能改写一下吗？您的意思是您可以在开发工具中看到 json 编码的错误，但它只是不显示？
实际上所有（表单验证和显示错误）都是从后端传递的，但在客户端只出现表单错误...如果我将文本字段留空，则错误显示...'Opps！有问题请检查以下字段。但是，如果我离开文件字段，则错误不会显示...
好的，当您填写包括图像在内的所有内容时，是否所有内容都正确输入到数据库并上传了图像？我觉得奇怪的是图片上传错误没有出现，因为代码与表单验证代码相同。

标签： javascript jquery ajax codeigniter geojson

【解决方案1】：

这一行是你的问题$config['file_name'] = $_FILES['img']['name'];

您可以删除以上行，因为 CI 已经为您完成了这项工作！

当没有上传任何内容并且错误报告处于打开状态时，您将在 ajax 调用中获得类似Message: Undefined index: img 的输出。因此，您的脚本将无法解析 json 响应。

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

【讨论】：