Uploadify jQuery怎樣進(jìn)行多文件上傳

小樊
83
2024-10-23 18:33:29

Uploadify 是一個(gè)基于 jQuery 的文件上傳插件，支持多文件上傳。要使用 Uploadify 進(jìn)行多文件上傳，請(qǐng)按照以下步驟操作：

  1. 首先，確保已經(jīng)在項(xiàng)目中引入了 jQuery 和 Uploadify 的相關(guān)文件。可以通過(guò)以下方式引入：
<!-- 引入 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>
  1. 在 HTML 文件中創(chuàng)建一個(gè)用于上傳文件的 input 元素：
<input type="file" name="file_upload" id="file_upload">
  1. 在 JavaScript 文件中，使用 Uploadify 插件為 input 元素創(chuàng)建一個(gè)上傳實(shí)例：
$(document).ready(function() {
    $('#file_upload').uploadify({
        'swf'      : 'path/to/uploadify.swf', // Flash 文件路徑
        'uploader' : 'path/to/uploadify.php', // 服務(wù)器端處理文件上傳的 URL
        'multi'     : true, // 允許同時(shí)上傳多個(gè)文件
        'queueSizeLimit' : 9, // 隊(duì)列中允許的最大文件數(shù)
        'simUploadLimit' : 2, // 同時(shí)上傳的最大文件數(shù)
        'onUploadStart' : function(file) {
            console.log('開(kāi)始上傳文件：' + file.name);
        },
        'onUploadSuccess' : function(file, response) {
            console.log('文件上傳成功：' + file.name + '，響應(yīng)：' + response);
        },
        'onUploadError' : function(file, reason) {
            console.log('文件上傳失?。?#x27; + file.name + '，原因：' + reason);
        },
        'onUploadComplete' : function(file) {
            console.log('文件上傳完成：' + file.name);
        }
    });
});
  1. 在服務(wù)器端（例如 PHP），創(chuàng)建一個(gè)處理文件上傳的文件（例如 uploadify.php）。在這個(gè)文件中，你需要處理多個(gè)文件的上傳請(qǐng)求。以下是一個(gè)簡(jiǎn)單的示例：
<?php
if (!empty($_FILES['file_upload']['tmp_name'])) {
    $uploadDir = 'uploads/'; // 上傳文件的存儲(chǔ)目錄
    $uploadPath = $uploadDir . basename($_FILES['file_upload']['name']); // 上傳文件的完整路徑

    if (move_uploaded_file($_FILES['file_upload']['tmp_name'], $uploadPath)) {
        echo '文件上傳成功：' . $_FILES['file_upload']['name'];
    } else {
        echo '文件上傳失?。?#x27; . $_FILES['file_upload']['name'];
    }
} else {
    echo '沒(méi)有選擇文件';
}
?>

現(xiàn)在，當(dāng)用戶選擇多個(gè)文件并點(diǎn)擊上傳按鈕時(shí)，Uploadify 將把這些文件發(fā)送到服務(wù)器端進(jìn)行處理。服務(wù)器端腳本將接收并處理這些文件，然后將結(jié)果返回給客戶端。

0 踩