You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在CodeIgniter中通过单个multi-part表单上传5图1视频(非AJAX)

没问题,我来一步步教你在CodeIgniter里搞定这个非AJAX上传5张图片+1个视频的需求,亲测可行,步骤如下:

在CodeIgniter中实现非AJAX多文件上传(5图+1视频)

1. 编写前端上传表单

首先得写个符合要求的HTML表单,重点一定要加enctype="multipart/form-data"——没有这个属性,文件根本传不上去!这里我给5张图片分别做了独立的文件输入框,视频单独一个,这样后续处理起来更直观,也不容易出错:

<form method="post" action="<?= base_url('upload/submit') ?>" enctype="multipart/form-data">
    <h3>上传5张图片</h3>
    <input type="file" name="image1" accept="image/*" required>
    <input type="file" name="image2" accept="image/*" required>
    <input type="file" name="image3" accept="image/*" required>
    <input type="file" name="image4" accept="image/*" required>
    <input type="file" name="image5" accept="image/*" required>

    <h3>上传视频</h3>
    <input type="file" name="video" accept="video/*" required>

    <button type="submit">提交上传</button>
</form>

小贴士:accept属性是为了让浏览器只显示对应类型的文件,提升用户体验,但后端必须再做验证——前端限制是可以被绕过的!

2. 配置上传参数(全局/动态二选一)

你可以在application/config/upload.php里设置全局上传规则,也可以在控制器里动态定义(推荐后者,不同场景参数灵活调整)。示例配置如下:

$config['upload_path']          = './uploads/'; // 手动创建这个目录,要确保有写权限
$config['allowed_types']        = 'gif|jpg|jpeg|png|mp4|mov|avi'; // 允许的图片/视频格式
$config['max_size']             = 10240; // 单个文件最大10MB,按需调整
$config['file_name']            = uniqid(); // 用唯一ID命名,避免文件重名
$config['overwrite']            = FALSE; // 不覆盖同名文件

注意:Linux服务器下记得给uploads目录设置权限,比如chmod 755 ./uploads,不然会上传失败!

3. 编写控制器处理上传逻辑

创建一个Upload.php控制器,核心是用CodeIgniter的上传库分别处理图片和视频:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('upload'); // 加载上传库
        $this->load->helper('url'); // 加载URL助手
    }

    public function index() {
        // 显示上传表单页面
        $this->load->view('upload_form');
    }

    public function submit() {
        $upload_errors = array();
        $uploaded_files = [
            'images' => [],
            'video' => ''
        ];

        // 图片上传配置
        $img_config['upload_path'] = './uploads/';
        $img_config['allowed_types'] = 'gif|jpg|jpeg|png';
        $img_config['max_size'] = 10240;
        $img_config['file_name'] = uniqid('img_'); // 给图片加前缀,方便区分

        // 循环处理5张图片
        for ($i = 1; $i <= 5; $i++) {
            $field = 'image' . $i;
            if (!empty($_FILES[$field]['name'])) {
                $this->upload->initialize($img_config);
                if (!$this->upload->do_upload($field)) {
                    $upload_errors[] = "第{$i}张图片上传失败:" . $this->upload->display_errors();
                } else {
                    $uploaded_files['images'][] = $this->upload->data(); // 保存成功的文件信息
                }
            } else {
                $upload_errors[] = "请选择第{$i}张图片";
            }
        }

        // 视频上传配置(复用基础配置,仅修改格式和文件名前缀)
        $vid_config = $img_config;
        $vid_config['allowed_types'] = 'mp4|mov|avi';
        $vid_config['file_name'] = uniqid('vid_');
        $this->upload->initialize($vid_config);

        if (!empty($_FILES['video']['name'])) {
            if (!$this->upload->do_upload('video')) {
                $upload_errors[] = "视频上传失败:" . $this->upload->display_errors();
            } else {
                $uploaded_files['video'] = $this->upload->data();
            }
        } else {
            $upload_errors[] = "请选择要上传的视频";
        }

        // 处理上传结果
        if (empty($upload_errors)) {
            // 所有文件上传成功!这里可以把$uploaded_files里的路径存到数据库
            $data['success_msg'] = '所有文件上传成功!';
            $this->load->view('upload_form', $data);
        } else {
            // 有错误,把错误信息返回给表单页面
            $data['error_msg'] = implode('<br>', $upload_errors);
            $this->load->view('upload_form', $data);
        }
    }
}

4. 在视图中显示反馈信息

修改upload_form.php视图,添加错误/成功提示,让用户知道上传结果:

<?php if (!empty($error_msg)): ?>
    <div style="color: red; margin: 10px 0; padding: 10px; border: 1px solid red;">
        <?= $error_msg ?>
    </div>
<?php endif; ?>

<?php if (!empty($success_msg)): ?>
    <div style="color: green; margin: 10px 0; padding: 10px; border: 1px solid green;">
        <?= $success_msg ?>
    </div>
<?php endif; ?>

<!-- 把之前的表单代码放在这里 -->

5. 服务器配置注意事项

  • 检查php.ini里的upload_max_filesize和post_max_size,要设置得比单个文件最大限制大(比如单个文件10MB,这两个值可以设为12M),否则会出现上传截断的问题。
  • 确保上传目录的写权限,否则CodeIgniter无法写入文件。

这样一套流程下来,就能完美实现你的非AJAX多文件上传需求了,有需要调整的地方(比如格式、大小)直接改对应配置就行~

内容的提问来源于stack exchange,提问作者Morteza Mousavi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 08:53:40