如何在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
相关产品推荐
相关产品推荐

