Uploadify jQuery怎样进行多文件上传

发布时间:2024-10-23 18:33:29

阅读量:142

Uploadify 是一个基于 jQuery 的文件上传插件，支持多文件上传。要使用 Uploadify 进行多文件上传，请按照以下步骤操作：

首先，确保已经在项目中引入了 jQuery 和 Uploadify 的相关文件。可以通过以下方式引入：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Uploadify CSS -->
<link rel="stylesheet" type="text/css" href="path/to/uploadify.min.css">

<!-- 引入 Uploadify JS -->
<script type="text/javascript" src="path/to/jquery.uploadify.min.js"></script>

在 HTML 文件中创建一个用于上传文件的 input 元素：

<input type="file" name="file_upload" id="file_upload">

在 JavaScript 文件中，使用 Uploadify 插件为 input 元素创建一个上传实例：

$(document).ready(function() {
    $('#file_upload').uploadify({
        'swf'      : 'path/to/uploadify.swf', // Flash 文件路径
        'uploader' : 'path/to/uploadify.php', // 服务器端处理文件上传的 URL
        'multi'     : true, // 允许同时上传多个文件
        'queueSizeLimit' : 9, // 队列中允许的最大文件数
        'simUploadLimit' : 2, // 同时上传的最大文件数
        'onUploadStart' : function(file) {
            console.log('开始上传文件：' + file.name);
        },
        'onUploadSuccess' : function(file, response) {
            console.log('文件上传成功：' + file.name + '，响应：' + response);
        },
        'onUploadError' : function(file, reason) {
            console.log('文件上传失败：' + file.name + '，原因：' + reason);
        },
        'onUploadComplete' : function(file) {
            console.log('文件上传完成：' + file.name);
        }
    });
});

在服务器端（例如 PHP），创建一个处理文件上传的文件（例如 uploadify.php）。在这个文件中，你需要处理多个文件的上传请求。以下是一个简单的示例：

<?php
if (!empty($_FILES['file_upload']['tmp_name'])) {
    $uploadDir = 'uploads/'; // 上传文件的存储目录
    $uploadPath = $uploadDir . basename($_FILES['file_upload']['name']); // 上传文件的完整路径

    if (move_uploaded_file($_FILES['file_upload']['tmp_name'], $uploadPath)) {
        echo '文件上传成功：' . $_FILES['file_upload']['name'];
    } else {
        echo '文件上传失败：' . $_FILES['file_upload']['name'];
    }
} else {
    echo '没有选择文件';
}
?>