Uploadify 是基於 jQuery 的 Flash/AJAX 批量上傳插件（註：現代專案建議使用 HTML5 方案如 Uppy、Dropzone、FilePond）。本文記錄在 CodeIgniter 架構下整合 Uploadify 的完整步驟，含資料庫擴展、表單渲染、前端初始化、後端接收與縮圖生成，供維護舊專案參考。
-- dili_fieldtypes 表新增欄位類型
INSERT INTO dili_fieldtypes (k, V) VALUES ('image', '圖片上傳區域');case 'image':
$field = [
'type' => 'VARCHAR',
'constraint' => 255,
'default' => ''
];
break;function _image($field, $default) {
// 實際 HTML 由視圖層控制，這裡返回空
return '';
}<!-- content_form.php / category_content_form.php -->
<?php if ($v['type'] == 'image'): ?>
<div id="uploadify-container">
<input type="file" name="file_upload" id="file_upload" />
<button type="button" id="btn-upload">上傳</button>
<button type="button" id="btn-cancel">取消上傳</button>
<input type="hidden" name="image_path" id="image_path" value="" />
<input type="hidden" name="image_thumb" id="image_thumb" value="" />
</div>
<link rel="stylesheet" href="asset/js/uploadify/uploadify.css" />
<script src="asset/js/uploadify/jquery.uploadify.min.js"></script>
<script>
$(function() {
$('#file_upload').uploadify({
'swf' : 'asset/js/uploadify/uploadify.swf',
'uploader' : 'photo/_savephoto_post',
'buttonText' : '選擇圖片',
'fileTypeDesc' : '圖片文件',
'fileTypeExts' : '*.jpg;*.jpeg;*.png;*.gif',
'multi' : true,
'auto' : false,
'onUploadSuccess' : function(file, data, response) {
// data 為後端返回的圖片路徑
$('#image_path').val(data);
// 如需即時預覽可在此追加 img 標籤
}
});
$('#btn-upload').click(function() {
$('#file_upload').uploadify('upload', '*');
});
$('#btn-cancel').click(function() {
$('#file_upload').uploadify('cancel', '*');
});
});
</script>
<?php endif; ?><?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Photo extends Front_Controller {
public function __construct() {
parent::__construct();
date_default_timezone_set('Asia/Shanghai');
}
// 獲取存儲路徑：attachments/年/月/
private function _getFilePath() {
$path = "attachments/" . date("Y") . "/";
if (!is_dir($path)) mkdir($path, 0755, true);
$path .= date("m") . "/";
if (!is_dir($path)) mkdir($path, 0755, true);
return $path;
}
// 生成縮圖（等比縮放）
private function _creat_photothumbs($fileName, $setW) {
$info = getimagesize($fileName);
if (!$info) return false;
switch ($info['mime']) {
case 'image/jpeg': $src = imagecreatefromjpeg($fileName); break;
case 'image/png': $src = imagecreatefrompng($fileName); break;
case 'image/gif': $src = imagecreatefromgif($fileName); break;
default: return false;
}
$w = $info[0]; $h = $info[1];
$scale = $h / $w;
$nw = $setW; $nh = $nw * $scale;
$dst = imagecreatetruecolor($nw, $nh);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $nw, $nh, $w, $h);
imagejpeg($dst, $fileName, 90); // 覆蓋原檔
imagedestroy($src); imagedestroy($dst);
return true;
}
// 上傳處理入口
public function _savephoto_post() {
$dest_dir = $this->_getFilePath();
if (!empty($_FILES)) {
$file = $_FILES['Filedata']; // Uploadify 固定欄位名
$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
$newName = date('YmdHis') . mt_rand(10000, 99999) . '.' . $ext;
$dest = $dest_dir . $newName;
if (move_uploaded_file($file['tmp_name'], $dest)) {
// 寬度 > 600 生成等比縮圖
$size = getimagesize($dest);
if ($size[0] > 600) {
$this->_creat_photothumbs($dest, 600);
}
// 生成 170x150 縮略圖（CodeIgniter Image Library）
$config = [
'image_library' => 'gd2',
'source_image' => $dest,
'create_thumb' => TRUE,
'maintain_ratio'=> TRUE,
'width' => 170,
'height' => 150,
'master_dim' => 'width',
'thumb_marker' => '_1',
];
$this->load->library('image_lib', $config);
$this->image_lib->resize();
echo $dest; // 返回路徑給前端
} else {
echo 'UPLOAD_FAILED';
}
}
}
}getimagesize() 確認 MIME，禁止上傳偽裝圖片的腳本。attachments 置於 Web 根目錄外，或配置 Nginx internal 指令，透過 PHP 讀取輸出。upload_max_filesize、post_max_size、JS 端 fileSizeLimit 三重限制。本文展示了 Uploadify 在 CodeIgniter 中的完整整合流程：資料庫擴展 → 模型定義 → 視圖渲染 + JS 初始化 → 後端接收 + 縮圖生成。雖 Uploadify 已停止維護（依賴 Flash），但理解其「前端隊列管理 + 後端單檔處理 + 異步回調」的架構模式，對掌握現代上傳組件（Uppy、Dropzone、FilePond）同樣有幫助。
