Uploadify 3.2教程，如何快速上手使用？-建站教程-锦华智联科技

第一部分：Uploadify 3.2 简介

Uploadify 3.2 是一个基于 Flash 和 HTML5 的多文件上传组件，它提供了统一的 API，可以在支持 Flash 的旧浏览器（如 IE9）和现代浏览器之间无缝切换。

（图片来源网络，侵删）

主要特点：

多文件上传：一次选择并上传多个文件。
上传队列：直观地显示上传队列，可以管理每个文件（如取消、重试）。
实时上传进度：显示每个文件的上传进度条和百分比。
客户端验证：可以限制文件类型、大小和数量。
自定义外观：通过 CSS 可以完全自定义上传按钮和队列的样式。
服务器端兼容：后端可以使用任何能处理文件上传的语言（PHP, ASP.NET, Java, Node.js 等）。

第二部分：环境准备与基础安装

下载 Uploadify 3.2

从官方网站或可靠的镜像站点下载，官方下载地址可能已失效，你可以从以下地址获取一个常用的打包版本： https://github.com/RyanNerd/uploadify (这是一个维护较好的 Fork)

下载后，你会得到一个包含所有必要文件的文件夹,通常结构如下：

uploadify/
├── css/
│   └── uploadify.css         // 样式文件
├── js/
│   ├── jquery.uploadify.min.js // 核心 JS 文件
│   └── swfobject.js         // Flash 对象加载库
├── uploadify.swf            // Flash 文件，用于旧浏览器
└── uploadify.php            // PHP 后端示例（可选）

创建基本 HTML 文件

在你的项目中创建一个 HTML 文件，index.html，你需要引入 jQuery、Uploadify 的 CSS 和 JS 文件。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Uploadify 3.2 教程</title>
    <!-- 引入 Uploadify 样式 -->
    <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
    <style>
        /* 一些自定义样式 */
        body { font-family: Arial, sans-serif; padding: 20px; }
        h1 { color: #333; }
        #file_upload { margin: 20px 0; }
    </style>
</head>
<body>
    <h1>Uploadify 3.2 基础上传示例</h1>
    <!-- 上传按钮将在这里被渲染 -->
    <input type="file" id="file_upload" name="file_upload" multiple>
    <!-- 引入 jQuery (必须) -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- 引入 swfobject (用于加载 Flash) -->
    <script src="uploadify/swfobject.js"></script>
    <!-- 引入 Uploadify 核心 JS -->
    <script src="uploadify/jquery.uploadify.min.js"></script>
    <script>
        $(function() {
            // Uploadify 初始化代码将放在这里
        });
    </script>
</body>
</html>

注意：jQuery 的版本建议使用 1.x，因为 Uploadify 3.2 对 jQuery 2.x 及以上版本的支持可能有问题，上面的例子使用了 1.11.1,这是一个稳定的选择。

第三部分：初始化 Uploadify (基础用法)

在 $(function() { ... }); 中，调用 uploadify() 方法来初始化你的文件上传控件。

$(function() {
    $('#file_upload').uploadify({
        // --- 必需参数 ---
        'swf'      : 'uploadify/uploadify.swf', // Flash 文件的路径
        'uploader' : 'uploadify.php',           // 服务器端处理脚本的路径
        // --- 可选参数 ---
        'buttonText' : '选择文件...',           // 按钮上的文字
        'auto'      : true,                     // 选择文件后是否自动上传
        'multi'     : true,                     // 是否允许多选
        'fileTypeExts' : '*.jpg; *.png; *.gif; *.doc; *.pdf', // 允许的文件扩展名
        'fileSizeLimit' : '2MB',                // 文件大小限制
        'queueID'   : 'fileQueue',              // 队列的容器 ID
        'onUploadSuccess' : function(file, data, response) {
            alert('文件 ' + file.name + ' 上传成功!');
        }
    });
});

参数解释：

swf: 指定 uploadify.swf 文件的相对路径，这是告诉 Uploadify 在旧浏览器中如何创建上传界面。
uploader: 指定服务器端脚本的路径，所有选中的文件都会被 POST 到这个地址。
buttonText: 自定义按钮上显示的文字。
auto: 如果为 true，文件选择后会立即开始上传，如果为 false，文件会加入队列，需要点击“上传”按钮才开始。
multi: 如果为 true，可以在文件选择对话框中按住 Ctrl 或 Shift 选择多个文件。
fileTypeExts: 限制用户只能选择指定扩展名的文件，使用分隔。
fileSizeLimit: 限制单个文件的大小，可以使用 KB, MB, GB 等单位。
queueID: 指定一个 <div> 的 ID，Uploadify 会将上传队列渲染到这个 <div> 中，如果未指定,队列会直接出现在按钮下方。
onUploadSuccess: 上传成功时触发的回调函数，它接收三个参数：file (文件对象), data (服务器返回的数据), response (布尔值，表示请求是否成功)。

添加队列容器：

在你的 HTML 中，添加一个 <div> 作为队列的容器。

<!-- 在 input 标签后面添加 -->
<div id="fileQueue"></div>

第四部分：服务器端处理 (以 PHP 为例)

Uploadify 将文件以 multipart/form-data 格式发送到服务器，与普通表单上传文件的方式相同，你需要创建一个 PHP 脚本来接收这些文件。

uploadify.php (服务器端脚本示例)

<?php
// 定义上传目录，确保此目录存在且有写入权限
$targetDir = 'uploads/';
// 如果目录不存在则创建
if (!file_exists($targetDir)) {
    @mkdir($targetDir, 0777, true);
}
// 处理上传的文件
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];  // 临时文件名
    $targetFile = $targetDir . $_FILES['Filedata']['name']; // 目标文件名
    // 将临时文件移动到目标目录
    move_uploaded_file($tempFile, $targetFile);
    // 可以在这里进行其他操作，比如图片压缩、数据库记录等
    echo '1'; // 返回成功状态码，供前端回调使用
} else {
    // 处理错误情况
    echo '0'; // 返回失败状态码
}
?>

重要说明：

文件字段名：Uploadify 默认使用 Filedata 作为文件输入字段的 name，如果你的 uploader 脚本需要接收其他参数，可以通过 formData 选项传递。
权限：确保 uploads 目录的 web 服务器用户（如 www-data 或 apache）有写入权限。
返回值：onUploadSuccess 回调中的 response 参数，就是由这个 PHP 脚本输出的内容，你可以输出 echo 'success'，然后在回调中判断 if(response == 'success')。

第五部分：高级配置与回调函数

Uploadify 提供了丰富的事件和配置选项,让你能更精细地控制上传行为。

传递额外数据到服务器

如果你需要在上传文件的同时传递一些额外的数据（如用户ID、分类ID等），可以使用 formData 选项。

$('#file_upload').uploadify({
    'swf'      : 'uploadify/uploadify.swf',
    'uploader' : 'uploadify.php',
    'formData' : {
        'timestamp' : '<?php echo time(); ?>',
        'token'     : '<?php echo md5('unique_salt' . time()); ?>',
        'userId'    : '123'
    }
});

在你的 PHP 脚本中，你可以通过 $_POST 获取这些值：

$userId = $_POST['userId'];
$token = $_POST['token'];
// ... 进行验证等操作

常用事件回调

onQueueComplete: 当队列中所有文件都上传完毕后触发。

'onQueueComplete' : function(queueData) {
    // queueData 包含上传统计信息
    alert('总共上传了 ' + queueData.uploadsSuccessful + ' 个文件，失败了 ' + queueData.uploadsFailed + ' 个文件。');
}

onUploadError: 当单个文件上传失败时触发。

'onUploadError' : function(file, errorCode, errorMsg, errorString) {
    alert('文件 ' + file.name + ' 上传失败: ' + errorString);
}

onSelect: 当用户选择文件后触发（在加入队列之前）。

'onSelect' : function(file) {
    console.log('你选择了文件: ' + file.name);
}

onCancel: 当用户从队列中移除一个文件时触发。

'onCancel' : function(file) {
    console.log('你取消了文件: ' + file.name);
}

动态控制上传

你可以通过 JavaScript 动态地控制 Uploadify 的行为。

// 初始化时设置 auto 为 false
$('#file_upload').uploadify({
    'swf'      : 'uploadify/uploadify.swf',
    'uploader' : 'uploadify.php',
    'auto'     : false,
    'buttonText' : '选择文件但不立即上传'
});
// 添加一个“开始上传”按钮
$('#start_upload').on('click', function() {
    $('#file_upload').uploadify('upload', '*'); // 上传所有队列中的文件
});
// 添加一个“停止上传”按钮
$('#stop_upload').on('click', function() {
    $('#file_upload').uploadify('stop'); // 停止当前上传
});
// 添加一个“取消所有”按钮
$('#cancel_all').on('click', function() {
    $('#file_upload').uploadify('cancel', '*'); // 取消所有队列中的文件
});

Uploadify API 方法：

uploadify('upload', '*'): 开始上传。表示所有文件，也可以指定文件 ID。
uploadify('stop'): 停止当前正在上传的文件。
uploadify('cancel', '*'): 取消队列中的文件。表示所有文件。
uploadify('destroy'): 销毁 Uploadify 实例,释放资源。

第六部分：常见问题与解决方案

Q: 为什么在 Chrome/Firefox 中看不到按钮，或者报错 `[object Object]`？

A: 这通常是因为 CORS (跨域资源共享) 问题，你的 HTML 页面和 uploadify.swf 文件不在同一个域下，Flash 有严格的安全策略。

解决方案：确保你的 HTML 页面和 swf 文件在同一个域名下，这是最简单也是最正确的做法，不要试图通过修改 crossdomain.xml 来绕过，因为现代浏览器（尤其是 Chrome）对 Flash 的支持越来越严格，并且已经内置了更严格的 CORS 策略。

Q: 为什么 IE9 或更低版本无法工作？

A: 检查 swf 文件的路径是否正确，如果路径错误，IE 无法加载 Flash，插件将无法初始化，使用浏览器开发者工具或 Firebug 查看是否有 404 错误。

Q: 如何自定义上传按钮的样式？

A: Uploadify 的按钮样式主要是由 uploadify.css 中的 .uploadify-button 类控制的，你可以通过修改这个类或添加新的 CSS 规则来覆盖它。

    /* 自定义按钮样式 */
    .uploadify-button {
        background-color: #4CAF50;
        border-radius: 5px;
        color: white;
        font-weight: bold;
        line-height: 23px;
        margin: 0;
        text-align: center;
        border: none;
        padding: 5px 15px;
    }
    .uploadify-button:hover {
        background-color: #45a049;
    }

Q: 上传后如何获取服务器返回的文件路径或ID？

A: 在服务器端处理完文件后，将你需要的信息（如文件名、数据库ID、完整URL）作为字符串返回，然后在 onUploadSuccess 回调中接收这个字符串。

    // uploadify.php
    $targetFile = $targetDir . $_FILES['Filedata']['name'];
    move_uploaded_file($tempFile, $targetFile);
    // 假设你将文件路径存入数据库并得到了一个ID
    $fileId = saveToDatabase($targetFile);
    echo json_encode(['id' => $fileId, 'path' => $targetFile]); // 返回 JSON

```javascript
// JavaScript
'onUploadSuccess' : function(file, data, response) {
    if (response) {
        var result = JSON.parse(data);
        console.log('文件ID: ' + result.id);
        console.log('文件路径: ' + result.path);
    }
}
```

第七部分：总结与展望

Uploadify 3.2 是一个功能强大且成熟的文件上传解决方案，特别适合需要兼容旧版浏览器的项目，通过本教程，你应该已经掌握了它的基本用法、服务器端配置以及一些高级技巧。

现代替代品：

对于新项目，你可能需要考虑更现代的库，因为它们不再依赖 Flash：

Dropzone.js: 极其易用，专注于拖拽上传,界面美观。
Plupload: 功能非常全面，支持多种上传方式（HTML5, Flash, Silverlight, HTML4）,稳定可靠。
Fine Uploader: 商业级库，功能强大,安全性和可定制性极高。

希望这份教程对你有帮助！

Uploadify 3.2教程，如何快速上手使用？