ThinkPHP + Uploadify 實作多圖片上傳功能完整教學

前置準備

1. 下載 Uploadify 並解壓至 /Public/uploadify/
2. 確認 /Uploads/ 目錄可寫入
3. 資料表 upload 需包含 name、size、type 欄位

前端頁面（HTML + JavaScript）

<script src="/Public/uploadify/jquery.min.js"></script>
<script src="/Public/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="/Public/uploadify/uploadify.css">

<script type="text/javascript">
var img_id_upload = new Array();
var i = 0;

$(function() {
    $('#file_upload').uploadify({
        'auto'           : false,           // 關閉自動上傳
        'removeTimeout'  : 600,             // 完成後 0.6 秒移除隊列項目
        'swf'            : '/Public/uploadify/uploadify.swf',
        'uploader'       : '/__URL__/Article/uploadify',  // 後端處理地址
        'method'         : 'post',
        'buttonText'     : '選擇圖片',
        'multi'          : true,            // 允許多檔
        'uploadLimit'    : 8,               // 單次最多 8 張
        'fileTypeDesc'   : 'Image Files',
        'fileTypeExts'   : '*.gif; *.jpg; *.png',
        'fileSizeLimit'  : '2000KB',
        'onUploadSuccess': function(file, data, response) {
            // 成功回呼：顯示縮圖並記錄檔名
            $('#image').append(
                '<div style="float:left;margin:2px 0 0 2px">'
                + '<img width="100" height="100" src="/uploads/' + data + '" />'
                + '</div>'
            );
            img_id_upload[i] = data;
            i++;
        }
    });
});
</script>

<input type="file" name="file_upload" id="file_upload" />
<p><a href="javascript:$('#file_upload').uploadify('upload','')">上傳</a></p>
<br />
<div id="image" class="image"><br />

後端處理

public function uploadify() {
    $ph = M('Upload');
    import('ORG.Net.UploadFile');
    
    $upload = new UploadFile();
    $upload->maxSize   = 93145728;        // 89 MB
    $upload->saveRule  = rand(1, 9999);   // 隨機檔名前綴
    $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg', 'flv', 'avi', 'mov');
    $upload->savePath  = './Uploads/';
    
    if (!$upload->upload()) {
        $this->error($upload->getErrorMsg());
    } else {
        $info = $upload->getUploadFileInfo();
    }
    
    for ($i = 0; $i < count($info); $i++) {
        $data['name'] = $info[$i]['savename'];
        $data['size'] = $info[$i]['size'];
        $data['type'] = $info[$i]['extension'];
        echo $info[$i]['savename'];       // 回傳檔名供前端顯示
        $ph->add($data);
    }
}

常見問題與優化

進階擴展

• 圖片壓縮/縮略圖自動生成（搭配 Image 類庫）
• 上傳進度條、斷點續傳
• 雲端儲存對接（七牛、阿里云 OSS、AWS S3）