如何用AJAX在CodeIgniter中上传PDF？AJAX脚本报错排查

哦，我一眼就看出问题所在了——你用了$(this).serialize()来处理表单数据，但这个方法根本没法处理文件上传！serialize()只能序列化文本类型的表单字段，文件是二进制数据，得用FormData对象才行。下面给你一步步修正方案：

1. 修正AJAX脚本核心问题 #

你需要把serialize()替换成FormData，同时调整AJAX的两个关键参数，具体代码如下：

$("#form").submit(function(e){
    // 先阻止表单默认提交行为，避免页面跳转
    e.preventDefault();
    
    // 创建FormData对象，自动包含表单所有数据（包括文件）
    var formData = new FormData(this);
    
    $.ajax({
        type:"POST",
        url: base_url+"car/save_car",
        data: formData, // 用FormData替代serialize()
        dataType:"json",
        // 这两个参数必须设置为false，否则jQuery会破坏FormData的结构
        processData: false,
        contentType: false,
        beforeSend:function() {
            $("#loading-box").show();
            $("#btn-save").addClass("disabled");
        },
        success: function(res) {
            $("#loading-box").hide();
            var msg="";
            if(res.error) {
                // 这里补全你的错误提示逻辑，比如：
                $("#alert-box").html('<div class="alert alert-danger">'+res.msg+'</div>');
            } else {
                // 补全成功逻辑，比如：
                $("#alert-box").html('<div class="alert alert-success">文件上传成功！</div>');
                $("#form")[0].reset(); // 重置表单
            }
            $("#btn-save").removeClass("disabled");
        },
        // 新增错误处理，方便排查问题
        error: function(xhr, status, err) {
            $("#loading-box").hide();
            $("#btn-save").removeClass("disabled");
            $("#alert-box").html('<div class="alert alert-danger">请求出错：'+err+'</div>');
        }
    });
});

2. 服务器端CodeIgniter处理逻辑 #

确保你的car控制器的save_car方法能正确接收并处理上传文件：

public function save_car() {
    // 配置上传参数
    $config['upload_path'] = './uploads/pdf/'; // 确保这个目录存在且有写入权限
    $config['allowed_types'] = 'pdf'; // 只允许PDF文件
    $config['max_size'] = 2048; // 限制2MB，可按需调整
    $config['file_name'] = uniqid().'.pdf'; // 生成唯一文件名，避免覆盖

    $this->load->library('upload', $config);

    // 处理上传（注意这里的'pdf_file'是你表单中文件输入框的name属性）
    if ( ! $this->upload->do_upload('pdf_file')) {
        // 上传失败，返回错误信息
        echo json_encode([
            'error' => true,
            'msg' => $this->upload->display_errors()
        ]);
    } else {
        // 上传成功，获取文件信息
        $upload_data = $this->upload->data();
        
        // 这里可以添加将文件路径存入数据库等业务逻辑
        // 示例：$this->car_model->save_car_record($upload_data['full_path']);
        
        echo json_encode([
            'error' => false,
            'msg' => 'PDF文件上传成功！'
        ]);
    }
}

3. 额外注意事项 #

• 表单中的文件输入框必须有name属性，比如：<input type="file" name="pdf_file" accept=".pdf">
• 服务器端的./uploads/pdf/目录必须存在，并且设置正确的写入权限（一般设为755）
• 如果你的CodeIgniter开启了CSRF保护，需要把CSRF Token加入FormData，可在创建FormData后添加：

  formData.append('<?php echo $this->security->get_csrf_token_name(); ?>', '<?php echo $this->security->get_csrf_hash(); ?>');
  

内容的提问来源于stack exchange，提问作者Gusti Erlangga