PHP MVC 框架 SkyMVC 實作多檔案上傳功能範例

PHP MVC 框架 SkyMVC 實作多檔案上傳功能範例

本文分享 SkyMVC 實作檔案上傳的完整程式碼，包含控制器、視圖與前端 JS 處理。

1. 控制器 upload.ctrl.php

<?php
class uploadControl extends skymvc {
    public function __construct() {
        parent::__construct();
    }
    public function onDefault() {
        $this->smarty->display("upload/default.html");
    }
    public function onUpload() {
        $this->loadClass("upload");
        // 上傳目錄
        $this->upload->uploaddir = "attach/my/";
        // 允許上傳最大檔案大小（4GB）
        $this->upload->maxsize = 4194304000;
        // 是否為圖片
        $this->upload->upimg = true;
        // 允許上傳的檔案類型
        $this->upload->sysallowtype = array('gif','jpg','bmp','png','jpeg','txt','mpeg','avi','rm','rmvb','wmv','flv','mp3','wav','wma','swf','doc','pdf','zip','tar','svg');
        $this->upload->allowtype = $this->upload->sysallowtype;
        // 依 ID 儲存
        $this->upload->iddir = 0;
        $data = $this->upload->uploadfile("upimg");
        echo json_encode($data);
    }
}
?>

2. 視圖 upload.html

<!doctype html>
<html>
{include file="head.html"}
<body>
{include file="header.html"}
<div class="main-body box960">
<form method="post" action="/index.php?m=upload&a=upload" enctype="multipart/form-data">
<div class="row">
<div class="btn-upload">
<i class="iconfont icon-upload"></i> 上傳檔案
<div class="btn-upload-file">
<input type="file" id="upimg" name="upimg" multiple>
</div>
</div>
</div>
<div></div>
<div class="row">
<input type="submit" class="btn" value="上傳">
</div>
</form>
<h3>上傳結果</h3>
<div class="result" id="result"></div>
</div>
{include file="footer.html"}
<style>
.result{border:1px solid #ccc; padding:5px;}
.result div{line-height:24px;}
.result .e{color:#D58384;}
.result .s{color:#59A42A;}
</style>
<script src="/static/js/skyupload.js"></script>
<script>
$(document).on("change", "#upimg", function(data){
    skyUpload("upimg", "/index.php?m=upload&a=upload&ajax=1", function(e){
        var data = eval("(" + e.target.responseText + ")");
        if (data.err) {
            $("#result").append('<div class="e">error:' + data.err + '</div>');
        } else {
            $("#result").append('<div class="s">success:' + data.filename + '</div>');
        }
    });
});
</script>
</body>
</html>

3. 前端 JS 處理 skyupload.js

function skyUpload(upid, url, success, error, uploadProgress) {
    var vFD = new FormData();
    var f = document.getElementById(upid).files;
    $("#" + upid + "loading").show();
    for (var i = 0; i < f.length; i++) {
        vFD.append('upimg', document.getElementById(upid).files[i]);
        var oXHR = new XMLHttpRequest();
        oXHR.addEventListener('load', success, false);
        oXHR.addEventListener('error', error, false);
        if (uploadProgress != undefined) {
            oXHR.upload.addEventListener("progress", uploadProgress, false);
        }
        oXHR.open('POST', url);
        oXHR.send(vFD);
    }
}

以上即為 SkyMVC 多檔案上傳完整實作，希望對您的 PHP 程式設計有所幫助。