PHP swfupload图片上传实例代码如何实现？

PHP与SWFUpload结合实现图片上传功能,是Web开发中常见的技术方案，SWFUpload作为一个基于Flash的上传组件，能够突破传统HTML表单上传的限制，支持多文件上传、进度显示和更友好的用户交互体验，下面将通过实例代码详细介绍如何实现这一功能。

环境准备与依赖

首先需要确保服务器环境支持PHP,并下载SWFUpload的核心文件包，核心文件包括SWFUpload.js、swfupload.swf以及相关的CSS样式文件，需要引入jQuery等库以简化DOM操作和事件处理，将下载的文件放置在项目的合适目录下，通常建议创建一个名为”js”和”css”的文件夹分别存放JavaScript和CSS文件。

前端页面实现

在前端页面中,需要创建一个用于触发上传的按钮和显示上传进度或结果的区域，以下是一个基础的前端HTML结构示例：

<div id="uploadContainer">  
    <div id="buttonPlaceholder"></div>  
    <div id="uploadProgress"></div>  
    <div id="uploadResult"></div>  
</div>  

初始化SWFUpload的JavaScript代码如下：

var swfu;  
window.onload = function() {  
    swfu = new SWFUpload({  
        upload_url: "upload.php",  
        file_post_name: "uploadFile",  
        file_size_limit: "2 MB",  
        file_types: "*.jpg;*.jpeg;*.png",  
        file_types_description: "Image Files",  
        file_upload_limit: 10,  
        flash_url: "js/swfupload.swf",  
        button_image_url: "images/upload_button.png",  
        button_placeholder_id: "buttonPlaceholder",  
        button_width: 100,  
        button_height: 30,  
        button_text: '<span class="buttonText">选择图片</span>',  
        button_text_style: '.buttonText { font-size: 16px; }',  
        button_text_top_padding: 6,  
        button_text_left_padding: 15,  
        button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,  
        button_cursor: SWFUpload.CURSOR.HAND,  
        debug: false,  
        custom_settings: {  
            progressTarget: "uploadProgress",  
            uploadTarget: "uploadResult"  
        },  
        file_queued_handler: fileQueued,  
        file_queue_error_handler: fileQueueError,  
        file_dialog_complete_handler: fileDialogComplete,  
        upload_progress_handler: uploadProgress,  
        upload_error_handler: uploadError,  
        upload_success_handler: uploadSuccess,  
        upload_complete_handler: uploadComplete  
    });  
};  

事件处理函数

上述初始化代码中涉及多个事件处理函数,需要分别实现：

• fileQueued: 文件加入队列时的回调。
• fileQueueError: 文件加入队列失败时的回调。
• fileDialogComplete: 文件选择对话框关闭后的回调。
• uploadProgress: 上传进度回调。
• uploadError: 上传失败回调。
• uploadSuccess: 上传成功回调。
• uploadComplete: 上传完成回调。

uploadSuccess函数可以这样实现：

function uploadSuccess(file, serverData) {  
    try {  
        var progress = new FileProgress(file, this.customSettings.uploadTarget);  
        progress.setComplete();  
        progress.setStatus("上传成功");  
        progress.toggleCancel(false);  
        $("#uploadResult").append("<img src='" + serverData + "' width='100' height='100'/>");  
    } catch (ex) {  
        this.debug(ex);  
    }  
}  

后端PHP处理

后端PHP文件（upload.php）负责接收上传的文件并进行处理，以下是基础代码示例：

<?php  
$targetDir = "uploads/";  
if (!file_exists($targetDir)) {  
    mkdir($targetDir, 0777, true);  
}  
if (!empty($_FILES["uploadFile"])) {  
    $tempFile = $_FILES["uploadFile"]["tmp_name"];  
    $targetFile = $targetDir . $_FILES["uploadFile"]["name"];  
    move_uploaded_file($tempFile, $targetFile);  
    echo $targetFile;  
} else {  
    echo "上传失败";  
}  
?>  

安全性优化

在实际应用中,需要对上传的文件进行安全性检查，包括文件类型、文件大小以及文件内容等，可以使用finfo函数或getimagesize函数验证文件是否为合法图片。

相关问答FAQs

Q1: 如何限制上传文件的大小？
A1: 在SWFUpload初始化时，通过file_size_limit参数设置文件大小限制，例如file_size_limit: "2 MB"表示最大允许上传2MB的文件，在PHP端可以通过$_FILES["uploadFile"]["size"]再次验证文件大小。

Q2: 上传过程中如何显示实时进度？
A2: SWFUpload提供了upload_progress_handler回调函数，可以通过该函数获取上传进度信息，在回调函数中更新进度条的宽度或显示百分比文本，实现实时进度显示。