phpcms模块开发之swfupload的使用介绍

下面就为您详细讲解"phpcms模块开发之swfupload的使用介绍"。

什么是swfupload？

swfupload是一款使用Flash和JavaScript开发的多文件上传工具，可以上传多个文件，可以显示上传进程，在上传过程中可以使用自定义的事件来实现一些个性化的处理，广泛应用于各类网站的文件上传功能中。

如何在phpcms中使用swfupload？

首先，我们需要下载swfupload插件，并将其放到phpcms的statics目录下，然后在模块的template/init.tpl.php中引入swfupload插件的相关文件。

<link href="{APP_PATH}statics/js/swfupload/swfupload.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{APP_PATH}statics/js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="{APP_PATH}statics/js/swfupload/swfupload.queue.js"></script>

引入swfupload插件的相关文件后，我们需要在模块的template/content_upload.tpl.php中编写HTML代码和JavaScript代码，来实现文件上传功能。

下面是一个示例：

<form action="{APP_PATH}?m=模块名&c=内容页_controller&a=upload" method="post" enctype="multipart/form-data">
    <div class="file-item" id="file-select-button">
        <span>选择文件</span>
        <input type="file" multiple="multiple" name="file" id="file-upload-button" />
    </div>
</form>

<div id="file-queue"></div>

<script type="text/javascript">
    $(function() {
        var settings = {
            upload_url : "{APP_PATH}?m=模块名&c=内容页_controller&a=swfupload",
            post_params : {},
            flash_url : "{APP_PATH}statics/js/swfupload/swfupload.swf",
            file_size_limit : "10 MB",
            file_types : "*.jpg;*.gif;*.png",
            file_types_description : "图片文件",
            file_upload_limit : 0,
            file_queue_limit : 0,
            custom_settings : {
                cancelButtonId : "file-cancel-upload-button",
                fileQueueId : "file-queue",
                uploadTriggerId : "file-upload-button",
                progressTargetId : "file-queue",
                layoutUrl : "{APP_PATH}statics/js/swfupload/layout.html"
            },
            debug : false,
            prevent_swf_caching : true,
            button_placeholder_id : "file-select-button",
            button_width : 80,
            button_height : 26,
            button_text : "<span>Select Files</span>",
            button_text_style : ".button span { font-size: 14px; }",
            button_text_top_padding : 3,
            button_text_left_padding : 12,
            button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
            button_cursor : SWFUpload.CURSOR.HAND,
            button_disabled : false,
            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
            swfupload_loaded_handler : swfuploadLoaded,
            file_queued_handler : fileQueued,
            file_queue_error_handler : fileQueueError,
            file_dialog_complete_handler : fileDialogComplete,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
            upload_error_handler : uploadError,
            upload_success_handler : uploadSuccess,
            upload_complete_handler : uploadComplete
        };

        var swfu = new SWFUpload(settings);
    });
</script>

该示例中，我们通过一个form元素实现了文件上传功能，input元素的multiple属性能够实现多文件上传功能，name属性指定了文件上传到服务器后的字段名。

在JavaScript代码中，我们通过SWFUpload对象来创建了一个swfupload对象，配置了相关的参数，实现了文件上传功能。其中涉及了一些事件（例如file_queued_handler、upload_progress_handler等），可以自定义处理方式实现个性化的操作。

示例1：实现文件上传时显示上传进度

swfupload插件提供了upload_progress_handler事件，可以用来监控文件上传的进度。我们可以通过和后端配合返回文件上传进度的信息，然后在前端实现上传进度条的功能。

下面是示例代码：

在后端，我们需要实现一个返回文件上传进度的接口。

public function upload() {
    $file = $_FILES['file'];
    //处理上传文件的逻辑
}

public function progress() {
    $progress = 0;
    if (file_exists("progress.txt")) {
        $progress = file_get_contents("progress.txt");
    }

    echo $progress; //返回上传进度
}

在前端，我们需要在fileQueued事件中添加相关的参数，然后在uploadProgress事件中实现进度条的显示。

var settings = {
    //...
    custom_settings : {
        //...
        layoutUrl : "{APP_PATH}statics/js/swfupload/layout.html",
        progressBar : new progressBar("progress-bar-container")
    },
    //...
    file_queued_handler : function(file) {
        this.customSettings.progressBar.show();
    },
    upload_progress_handler : function(file, bytesUploaded, bytesTotal) {
        var progress = parseInt(bytesUploaded / bytesTotal * 100, 10);
        this.customSettings.progressBar.setProgress(progress);
    }
    //...
};

function progressBar(containerId) {
    this.container = $("#" + containerId);
    this.progress = $("<div>").addClass("progress");
    this.bar = $("<div>").addClass("bar");
    this.progress.append(this.bar);
    this.container.append(this.progress);

    this.hide();
}

progressBar.prototype.show = function() {
    this.container.show();
};

progressBar.prototype.hide = function() {
    this.container.hide();
};

progressBar.prototype.setProgress = function(progress) {
    this.bar.css("width", progress + "%");
};

在fileQueued事件中，我们创建了一个自定义参数progressBar，并通过一个自定义类progressBar实现进度条的显示。在uploadProgress事件中，我们通过计算已上传的数据占总数据的比例，然后更新进度条的进度。

示例2：实现跨域文件上传

如果你的phpcms模块是在一个独立的域名下面，而文件上传是跨域的，那么就需要实现跨域文件上传。

下面是示例代码：

在模块的controller中实现跨域文件上传的接口。

public function swfupload() {
    header('Access-Control-Allow-Origin:*');

    $targetDir = "uploads/";

    if (!file_exists($targetDir)) {
        mkdir($targetDir);
    }

    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetFile = $targetDir . $_FILES['Filedata']['name'];

    if (move_uploaded_file($tempFile, $targetFile)) {
        $data = array('success'=>true);
    } else {
        $data = array('success'=>false);
    }

    echo json_encode($data);
}

在前端的参数配置中，需要增加file_post_name参数指定上传文件的字段名。

var settings = {
    //...
    file_post_name : "Filedata",
    upload_url : "http://example.com/uploads.php",
    //...
};

注：以上示例代码为完整代码。其中示例代码中的{APP_PATH}可以替换为相应的路径。